<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>
は SVG の要素で、原子フィルタープリミティブをグループ化してカスタムフィルター効果を定義します。それ自身はレンダリングされませんが、 SVG 要素の filter
属性や SVG/HTML 要素の CSS の filter
プロパティで使用しなければなりません。
使用コンテキスト
属性
DOM インターフェイス
この要素は SVGFilterElement
インターフェイスを実装しています。
例
SVG
html
<svg width="230" height="120" xmlns="http://www.w3.org/2000/svg">
<filter id="blurMe">
<feGaussianBlur stdDeviation="5" />
</filter>
<circle cx="60" cy="60" r="50" fill="green" />
<circle cx="170" cy="60" r="50" fill="green" filter="url(#blurMe)" />
</svg>
結果
仕様書
Specification |
---|
Filter Effects Module Level 1 # FilterElement |
ブラウザーの互換性
BCD tables only load in the browser