filter
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
filter
属性は、 <filter>
要素で定義したフィルター効果を指定します。
メモ: プレゼンテーション属性として、 filter
は CSS プロパティとして使用することができます。詳しい情報は CSS の filter
を参照してください。
プレゼンテーション属性として、任意の要素に適用することができますが、効果があるのはコンテナー要素(<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-function-list>
|
---|---|
既定値 | none |
アニメーション | 可 |
値の説明は CSS filter
プロパティを参照してください。
仕様書
Specification |
---|
Filter Effects Module Level 1 # FilterProperty |
ブラウザーの互換性
BCD tables only load in the browser