SVGブラー効果

<defs>および<filter>

すべてのインターネットSVGフィルターは、<defs>要素内で定義されます。<defs>要素は定義の略で、特別な要素（フィルターなど）の定義が含まれています。

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

SVG <feGaussianBlur>

例1

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

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」フィルターにリンクします