図形にフィルターをかける
SVGで図形にフィルターをかけるには、filter要素を使用します。
filter要素は定義するのみで図形へ適用する場合は、filter要素にid属性を付与し、図形のfilter属性の値にurl関数を使用して、filter要素に指定したid属性の値をハッシュ付きで指定することで図形へ適用することができます。
filter要素によるフィルターの定義はdefs要素の中で行います。
defs要素については、再利用するための定義ページをご覧ください。
構文
<filter>
効果
</filter>効果については次のページをご覧ください。
属性
| 属性名 | 初期値 | 説明 |
|---|---|---|
| filterUnits | objectBoundingBox | フィルタを適用する範囲の指定の仕方。 x属性、y属性、width属性、height属性で指定すた時の座標の指定の仕方や座標の計算が変わる。 指定可能な値は次の通り。 userSpaceOnUse ... 適用した要素の直近のviewBoxの先祖要素を基準objectBoundingBox ... 適用した要素を基準にした割合（単位%を付ける必要がある） |
| primitiveUnits | userSpaceOnUse | 指定可能な値は次の通り。 userSpaceOnUse ... objectBoundingBox ... |
| x | -10% | フィルタの効果範囲を開始するX座標（位置）。 |
| y | -10% | フィルタの効果範囲を開始するY座標（位置）。 |
| width | 120% | フィルタの効果範の幅。 |
| height | 120% | フィルタの効果範の高さ。 |
| xlink:href | 継承する対象のfilter要素のid属性値。 ハッシュフラグメントとして指定する。 SVG 1.1の場合はこの属性を使用し、SVG 2からは非推奨となるのでhref属性を使用する。 |
|
| href | 継承する対象のfilter要素のid属性値。 ハッシュフラグメントとして指定する。 SVG 2からはこの属性を使用し、SVG 1.1まではxlink:href属性を使用する。 |
サンプルコードとデモ
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150" width="200" height="150">
<defs>
<filter id="sample">
<feGaussianBlur stdDeviation="5" />
</filter>
</defs>
<circle cx="100" cy="75" r="65" filter="url(#sample)" />
</svg>