SVG フォーカス効果

SVGは<feGaussianBlur>要素を使用してぼかし効果を表示します。<feGaussianBlur>フィルタは入力画像に対してガウスぼかしを行い、Internet Explorer 9および以前のバージョンではSVGフィルタリングをサポートしていません。

<svg height="250" width="250">
　　<defs>
　　　　<filter id="p1" x="0" y="0">
　　　　　　<feGaussianBlur in="SourceGraphic" stdDeviation="15"　/>
　　　　</filter>
　　</defs>
　　<rect width="120"　height="120"　stroke="green"　stroke-width="3"　fill="purple"　filter="url(#p1)"　/>
</svg>

実行後の生成された画像効果は以下の通りです：

使い方の説明

• <filter>のid属性は、パターンのユニークな名前を定義します。

• <feGaussianBlur>要素は、ぼかし効果を定義するために使用されます。

• <feGaussianBlur>要素のin =「SourceGraphic」部分は、全体の要素に効果を与えるための定義として使用されます。

• stdDeviation属性は、ぼかしの量を定義するために使用されます。

• <rect>要素のfilter属性は、要素を「p」にリンクするために使用されます。1フィルター。