带有图像过滤器但背景透明的 SVG 路径答案

【问题标题】：SVG path with image filter but transparent background带有图像过滤器但背景透明的 SVG 路径
【发布时间】：2016-08-22 22:56:06
【问题描述】：

我有一个带有通过过滤器添加的图像的路径。路径的背景颜色设置如下：

myPath.css('fill', bgColour);

我的问题是如何使路径透明但保持图像可见？

我尝试了fill: transparent、fill-opacity: 0、fill: rgba(0, 0, 0, 1)，但这些图像也变得不可见。

这是我当前的代码：

var filter = svg.filter(defs, 'myFilter', 0, 0, '100%', '100%', filterOptions);

var sourcePathRef = 'SourceGraphic';
if (hasTransparentBackground()) {
    // make path transparent
    svg.filters.colorMatrix(filter, 'TransformedGraphic', sourcePathRef, 'matrix', [
        [0, 0, 0, 0, 0], 
        [0, 0, 0, 0, 0], 
        [0, 0, 0, 0, 0], 
        [0, 0, 0, 0, 0]
    ]);
    sourcePathRef = 'TransformedGraphic';
}

// add the image
var outputSlot = 'customImage';
svg.filters.image(filter, outputSlot, imageFile, {
    preserveAspectRatio: aspectRatio
});
// move it
svg.filters.offset(filter, 'movedImage', outputSlot, moveX, moveY);
// combine image with path for clipping
svg.filters.composite(filter, 'clip', 'in', 'movedImage', sourcePathRef);
// mix both images
svg.filters.blend(filter, '', 'normal', 'clip', sourcePathRef);
// apply the filter
imageSlot.attr('filter', 'url(#myFilter)');

【问题讨论】：

路径透明但图片可见是什么意思？
如果图像小于路径，则路径的剩余区域不应填充颜色，而是显示 SVG 文件背后的内容（例如背景图像）。跨度>
为什么不直接将图像绘制为图像，然后将其剪切到路径中呢？
你的意思是clip-path？因为微软浏览器不支持这个：caniuse.com/#feat=css-clip-path
这是在讨论 CSS 剪辑路径，而不是 SVG 剪辑路径。 IE9+ 支持 SVG 内容上的 SVG 剪辑路径。

标签： image svg svg-filters

【解决方案1】：

简单修复：跳过最后一个（混合）过滤器 :-)

【讨论】：