<filter>
<filter>
は SVG の要素で、原子フィルタープリミティブをグループ化してカスタムフィルター効果を定義します。それ自身はレンダリングされませんが、 SVG 要素の filter (en-US)
属性や SVG/HTML 要素の CSS の filter
プロパティで使用しなければなりません。
使用コンテキスト
属性
DOM インターフェイス
この要素は SVGFilterElement
(en-US) インターフェイスを実装しています。
例
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
関連情報
<feBlend>
(en-US)<feColorMatrix>
<feComponentTransfer>
(en-US)<feComposite>
(en-US)<feConvolveMatrix>
(en-US)<feDiffuseLighting>
(en-US)<feDisplacementMap>
(en-US)<feDropShadow>
<feFlood>
(en-US)<feGaussianBlur>
<feImage>
(en-US)<feMerge>
(en-US)<feMorphology>
<feOffset>
<feSpecularLighting>
(en-US)<feTile>
(en-US)<feTurbulence>
(en-US)- SVG チュートリアル: フィルター効果