SVG ドロップシャドウ

<defs> と <filter>

すべてのインターネット SVG フィルタは、 <defs> 要素内に定義します。<defs> 要素は、 definitions の省略形で、特別な要素（filter）などの定義を含みます。

<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>

Try it Yourself »

コードの説明：

<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>

Try it Yourself »

コードの説明：

<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>

Try it Yourself »

コードの説明：

<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>

Try it Yourself »

コードの説明：

<feColorMatrix>フィルタは、黒により近いオフセット画像の色を変換するために使用します。 matrix 内の 3 つの値 '0.2' は、赤、緑、青のチャンネルすべてと乗算されます。値を小さくすると、黒に近い色になります（0 は黒です）