図形の現在の位置から移動するフィルターをかける
SVGで図形の現在の位置から移動するフィルターをかけるには、feOffset要素を使用します。
構文
<feOffset />属性
| 属性名 | 初期値 | 説明 |
|---|---|---|
| dx | 0 | 現在の位置から移動するX軸の距離。 |
| dy | 0 | 現在の位置から移動するY軸の距離。 |
サンプルコードとデモ
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150" width="200" height="150">
<defs>
<filter id="sample">
<feOffset dx="10" dy="10" />
</filter>
</defs>
<rect width="160" height="110" x="20" y="20" filter="url(#sample)" />
</svg>XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150" width="200" height="150">
<defs>
<filter x="0" y="0" width="100%" height="100%" id="sample">
<feOffset dx="-10" dy="-10" />
</filter>
</defs>
<rect width="160" height="110" x="20" y="20" filter="url(#sample)" />
</svg>