当我期待不同的结果时，我不明白为什么 SVG 过滤器会以它现在的方式运行。 这是过滤器代码:
<svg>
<defs>
<filter id="myFilter"> <feFlood result="floodFill" x="0" y="0" width="100%" height="100%" flood-color="green" flood-opacity="1"></feFlood>
<feBlend in="SourceGraphic" in2="floodFill" mode="multiply"></feBlend> </filter>
</defs>
</svg>
我以这种方式将它应用于图像:
<img style="filter: url(#myFilter);" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png">
我希望看到这个:
但我确实看到了这个:
原图是这样的:
有人可以解释为什么会这样吗？
最佳答案
至少在 Chrome 中，flood primitive 100% 被计算为包含 SVG 元素的默认大小的 100% - 当它没有明确标注尺寸时是 300px x 150px - 所有 HTML 的默认大小被替换img、object 和 iframe 元素。
如果您从 feFlood 中删除尺寸 - 它会将泛光应用到过滤元素的区域 + 10% 溢出(默认过滤区域)。如果你想摆脱溢出，那么你应该明确地调整你的过滤器。
(这在 Firefox 中也适用。Edge 不支持 CSS 过滤器，因此如果您希望它在 Edge 中工作，您必须使用 SVG <image> 标签将图像移动到 SVG 正文中，并将过滤器应用为一个属性。)
<svg>
<defs>
<filter id="myFilter" x="0%" y="0%" width="100%" height="100%">
<feFlood result="floodFill" flood-color="green" flood-opacity="1">
</feFlood>
<feBlend in="SourceGraphic" in2="floodFill" mode="multiply"></feBlend> </filter>
</defs>
</svg>
<img style="filter: url(#myFilter);" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png">关于css - 具有 100% 尺寸的 feFlood 的 SVG 过滤器尺寸不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43986730/