SVGドロップシャドウ

<defs>および<filter>

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

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

SVG <feOffset>

例1

<feOffset>要素は、ドロップシャドウ効果を作成するために使用されます。アイデアは、SVGグラフィック（画像または要素）を取得し、それをxy平面内で少し移動することです。

最初の例では、長方形をオフセットし（<feOffset>を使用）、次に元の画像をオフセット画像の上にブレンドします（<feBlend>を使用）。

feoffset

SVGコードは次のとおりです。

例

<svg height="120" width="120">
<defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
    </filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>

コードの説明：

<filter>要素のid属性は、フィルターの一意の名前を定義します
<rect>要素のfilter属性は、要素を「f1」フィルターにリンクします

例2

これで、オフセット画像をぼかすことができます（<feGaussianBlur>を使用）。

feoffset2

SVGコードは次のとおりです。

例

<svg height="140" width="140">
<defs>
    <filter id="f2" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f2)" />
</svg>

コードの説明：

<feGaussianBlur>要素のstdDeviation属性は、ぼかしの量を定義します

例3

次に、シャドウを黒にします。

feoffset3

SVGコードは次のとおりです。

例

<svg height="140" width="140">
<defs>
    <filter id="f3" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f3)" />
</svg>

コードの説明：

<feOffset>要素のin属性は、RGBAピクセル全体ではなく、ブラーにアルファチャネルを使用する「SourceAlpha」に変更されます。

例4

ここで、影を色として扱います。

feoffset4

SVGコードは次のとおりです。

例

<svg height="140" width="140">
<defs>
    <filter id="f4" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feColorMatrix result="matrixOut" in="offOut" type="matrix"
      values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f4)" />
</svg>

コードの説明：

<feColorMatrix>フィルターは、オフセット画像の色を黒に近づけるために使用されます。マトリックス内の「0.2」の3つの値はすべて、赤、緑、青のチャネルで乗算されます。それらの値を減らすと、色が黒に近づきます（黒は0です）