filter
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年1月以降、すべてのブラウザーで利用可能です。
filter 属性は、 <filter> 要素で定義したフィルター効果を指定します。
メモ:
プレゼンテーション属性であるため、 filter には対応する CSS プロパティ filter があります。両方が指定された場合、 CSS プロパティが優先されます。
プレゼンテーション属性として、任意の要素に適用することができますが、効果があるのはコンテナー要素(<defs> 要素以外を除く)、すべてのグラフィック要素、および <use> 要素のみです。
例
html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="2" />
</filter>
<rect x="10" y="10" width="80" height="80" filter="url(#blur)" />
</svg>
使用上のメモ
| 値 |
none
|
<filter-value-list>
|
|---|---|
| 既定値 | none |
| アニメーション | 可 |
値の説明は CSS の filter プロパティを参照してください。
仕様書
| 仕様書 |
|---|
| Filter Effects Module Level 1> # FilterProperty> |