1. ウェブ
  2. SVG
  3. リファレンス
  4. 属性
  5. filter

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

filter

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年1月以降、すべてのブラウザーで利用可能です。

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 プロパティを参照してください。

仕様書

仕様書
Filter Effects Module Level 1
# FilterProperty

ブラウザーの互換性

関連情報

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告