filter
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 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 プロパティを参照してください。
仕様書
| Specification |
|---|
| Filter Effects Module Level 1 # FilterProperty |
ブラウザーの互換性
Loading…