SVG ブラー効果の実装方法

ガウスぼかし効果: ガウスぼかし効果は、要素の周りにぼかしをかける効果です。以下のコード例は、円形の要素にガウスぼかし効果を適用する方法を示しています。

<svg>
  <defs>
    <filter id="blur-effect">
      <feGaussianBlur stdDeviation="5" />
    </filter>
  </defs>

  <circle cx="50" cy="50" r="50" filter="url(#blur-effect)" />
</svg>

フロントエンドフィルタリング: フロントエンドフィルタリングを使用すると、SVG要素全体にブラー効果をかけることができます。以下のコード例は、矩形要素にフロントエンドフィルタリングを適用する方法を示しています。

<svg>
  <defs>
    <filter id="blur-effect">
      <feGaussianBlur stdDeviation="5" />
    </filter>
  </defs>

  <rect x="0" y="0" width="200" height="100" filter="url(#blur-effect)" />
</svg>

複数のブラー効果の組み合わせ: 複数のブラー効果を組み合わせることで、より複雑な効果を実現することができます。以下のコード例は、要素に複数のブラー効果を適用する方法を示しています。

<svg>
  <defs>
    <filter id="blur-effect1">
      <feGaussianBlur stdDeviation="5" />
    </filter>
    <filter id="blur-effect2">
      <feGaussianBlur stdDeviation="10" />
    </filter>
  </defs>

  <rect x="0" y="0" width="200" height="100" filter="url(#blur-effect1) url(#blur-effect2)" />
</svg>

上記のコード例では、<feGaussianBlur>要素を使用してガウスぼかし効果を実装しています。stdDeviation属性の値を調整することで、ぼかしの強度を変更することができます。

これらはいくつかの基本的なブラー効果の実装方法です。さまざまな要素や属性を組み合わせることで、より複雑なブラー効果を作成することも可能です。詳細な情報や他の効果については、SVGの公式ドキュメントやチュートリアルを参照してください。