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 プロパティ 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

ブラウザーの互換性

関連情報