図形に矩形（長方形・四角形）塗り潰しのフィルターをかける
SVGで図形に矩形（長方形・四角形）塗り潰しのフィルターをかけるには、feFlood要素を使用します。
かけた図形要素の形状が矩形となり、属性で指定した色に塗り潰されて適用します。
構文
<feFlood />属性
| 属性名 | 初期値 | 説明 | 例 |
|---|---|---|---|
| flood-color | black | 適用する色。 | flood-color="#f00" |
| flood-opacity | 1 | flood-color属性で指定された色の不透明度。 0から1の間で指定。 例えば不透明度75%なら0.75、不透明度12.5%なら0.125と指定する。 |
flood-opacity="0.25" |
| x | 0 | 矩形の描画を開始するX軸（水平軸）の座標（位置）。 | x="10" |
| y | 0 | 矩形の描画を開始するY軸（垂直軸）の座標（位置）。 | y="20" |
| width | 適用した図形の幅 | 幅。 | width="240" |
| height | 適用した図形の高さ | 高さ。 | height="160" |
サンプルコードとデモ
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150" width="200" height="150">
<defs>
<filter id="sample1">
<feFlood flood-color="red" flood-opacity="0.7" />
</filter>
</defs>
<circle cx="100" cy="75" r="60" filter="url(#sample1)" />
</svg>XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150" width="200" height="150">
<defs>
<filter id="sample2">
<feFlood x="70" y="10" width="80" height="100" flood-color="red" flood-opacity="0.7" />
</filter>
</defs>
<circle cx="100" cy="75" r="60" filter="url(#sample2)" />
</svg>