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

関連情報