SVG (スケーラブル ベクター グラフィックス) は、要素にフィルターを適用するさまざまな方法を提供し、視覚効果を作成し、グラフィックスの外観を向上させることができます。 SVG でフィルターを使用する一般的な方法をいくつか示します。

1. <filter>要素:

   • SVG の<defs>セクション内の<filter>要素を使用してフィルターを定義します。
   • <filter>要素内でフィルター プリミティブを指定して、視覚効果を定義します。

    XML
    <svg>
     <defs>
       <filter id="myFilter" x="0" y="0" width="100%" height="100%">
         <!-- Define filter primitives here -->
       </filter>
     </defs>
     <!-- Apply the filter to an element using the filter attribute -->
     <rect width="100" height="100" style="fill: blue;" filter="url(#myFilter)" />
   </svg>
   

2. フィルタプリミティブ:

   • <feGaussianBlur> 、 <feColorMatrix> 、 <feBlend>などのフィルター プリミティブを使用して、特定の視覚効果を作成します。
   • これらのプリミティブの属性を調整して、フィルターの強度と動作を制御します。

    XML
    <filter id="blurFilter">
     <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
   </filter>
   

3. 複数のフィルターを適用します。

   • filter属性のurl()関数を使用してフィルターを連鎖させることにより、要素に複数のフィルターを適用できます。

    XML
    <rect width="100" height="100" style="fill: blue;" filter="url(#filter1) url(#filter2)" />
   

4. CSS と組み合わせて使用します。

   • フィルター ID を参照して CSS を使用してフィルターを適用します。

    css
    .myElement {
     filter: url(#myFilter);
   }
   

5. アニメーションフィルター:

   • フィルター パラメーターをアニメーション化して、時間の経過とともに動的な効果を作成できます。

    XML
    <animate attributeName="stdDeviation" values="0;5;0" dur="2s" repeatCount="indefinite" />
   

6. フィルターとブレンド モードを組み合わせる:

   • フィルターとブレンド モードを組み合わせて、複雑な視覚効果を実現します。

    XML
    <filter id="filter1">
     <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
   </filter>
   <filter id="filter2">
     <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 5 -2" />
   </filter>
   <rect width="100" height="100" style="fill: blue; mix-blend-mode: multiply;" filter="url(#filter1) url(#filter2)" />
   

特定のフィルタや効果に対するブラウザのサポートは異なる場合があるので、使用する予定の特定のフィルタや機能の互換性を確認することをお勧めします。