サイズが100％の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

クロムでは、少なくとも、フラッディングプリミティブ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">