具有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中，泛洪基元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">