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 |
ブラウザーの互換性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
filter |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.