css - 具有 100% 尺寸的 feFlood 的 SVG 过滤器尺寸不正确

Question

当我期待不同的结果时，我不明白为什么 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">

我希望看到这个:

但我确实看到了这个:

原图是这样的:

有人可以解释为什么会这样吗？

Answer 1

至少在 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">