図形にガウスぼかしのフィルターをかける
SVGで図形にガウスぼかしのフィルターをかけるには、feGaussianBlur要素を使用します。
ガウスぼかしのかかり方はパスを中心に内外どちらに対しても広がってかかります。
構文
<feGaussianBlur />属性
| 属性名 | 初期値 | 説明 |
|---|---|---|
| stdDeviation | 0 | ぼかしの広がり具合。 指定するとX軸とY軸の方向に広がっていく。 スペースで区切って指定することでX軸とY軸のぼかし具合を個別に指定することができる。 一括指定： 10別々指定： 6 2 |
サンプルコードとデモ
次のコードはX軸とY軸を一括して指定した場合の例です。
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150" width="200" height="150">
<defs>
<filter id="sample">
<feGaussianBlur stdDeviation="5" />
</filter>
</defs>
<rect x="20" y="20" width="160" height="110" filter="url(#sample)" />
</svg>次のコードはX軸とY軸を別々に指定した場合の例です。
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150" width="200" height="150">
<defs>
<filter id="sample">
<feGaussianBlur stdDeviation="5 0" />
</filter>
</defs>
<rect x="20" y="20" width="160" height="110" filter="url(#sample)" />
</svg>次のコードはグループに対して指定した例です。
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150" width="200" height="150">
<defs>
<filter id="sample">
<feGaussianBlur stdDeviation="5" />
</filter>
</defs>
<g filter="url(#sample)">
<rect x="20" y="20" width="80" height="60" />
<circle cx="120" cy="75" r="30" fill="none" stroke="red" stroke-width="10" />
</g>
</svg>