図形に影（ドロップシャドウ）のフィルターをかける
SVGで図形に影（ドロップシャドウ）のフィルターをかけるには、feDropShadow要素を使用します。
構文
<feDropShadow />属性
| 属性名 | 初期値 | 説明 |
|---|---|---|
| dx | 2 | 適用した要素を基準に移動するX軸の座標（位置）。 |
| dy | 2 | 適用した要素を基準に移動するY軸の座標（位置）。 |
| stdDeviation | 2 | 影の広がり。 |
| flood-color | black | 適用する色。 |
| flood-opacity | 1 | flood-color属性で指定された色の不透明度。 0から1の間で指定。 例えば不透明度75%なら0.75、不透明度12.5%なら0.125と指定する。 |
サンプルコードとデモ
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150" width="200" height="150">
<defs>
<filter id="sample">
<feDropShadow />
</filter>
</defs>
<rect width="160" height="110" x="10" y="10" fill="lightgray" filter="url(#sample)" />
</svg>XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150" width="200" height="150">
<defs>
<filter id="sample">
<feDropShadow dx="0" dy="0" stdDeviation="5" flood-color="red" />
</filter>
</defs>
<rect width="160" height="110" x="10" y="10" fill="lightgray" filter="url(#sample)" />
</svg>XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 50" width="200" height="50">
<defs>
<filter id="sample">
<feDropShadow />
</filter>
</defs>
<text y="30" font-size="30" fill="red" filter="url(#sample)">あいうえお</text>
</svg>