SVG フォーカス効果

<defs>と<filter>

すべてのSVGフィルタは <defs> 中で定義されています。<defs> 要素は定義（definitions）の短縮形で、特殊な要素（例えばフィルタ）の定義を含みます。

<filter> 要素はSVGフィルタを定義するために使用されます。<filter> 要素には必須のid属性があります。この属性はフィルタを識別し、グラフィックが使用するフィルタを指します。

SVG <feGaussianBlur>

例1

<feGaussianBlur> ぼかし効果を作成するための要素：

これはSVGコードです：

<svg height="110" width="110">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

自分で試してみてください

コード説明：

  • <filter>要素のid属性はフィルタのユニークな名前を定義します
  • <feGaussianBlur>要素はぼかし効果を定義します
  • in="SourceGraphic" は要素全体に効果を設定する定義されています
  • stdDeviation 属性はぼやけの量を定義します
  • <rect> 要素の filter 属性は「f1」フィルタに要素をリンクします