CSS3 を使用して SVG ドロップ シャドウを作成するにはどうすればよいですか?

CSS3 を使用した SVG ドロップ シャドウ

CSS3 によるドロップ シャドウの実装

CSS3 を使用して SVG 要素にドロップ シャドウ効果を追加することができます。以前の box-shadow または -webkit-box-shadow プロパティとは異なり、最新のアプローチには CSS フィルター プロパティの利用が含まれます。

CSS フィルター プロパティの使用

Webkit、Firefox などの一般的なブラウザーでサポートされています。 34 および Edge では、CSS フィルター プロパティはドロップ シャドウ用の専用構文を提供します。エフェクト:

filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7));

ドロップ シャドウ効果の適用

「.shadow」クラスを使用して SVG 要素にフィルター プロパティを適用します:

.shadow {
  filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7));
}

ドロップ シャドウ効果は、イメージ、シェイプ、グループなど、「.shadow」クラスを持つすべての SVG 要素に適用されます。影の外観は、フィルタ関数内の値を調整することでカスタマイズできます。

ブラウザ間の互換性

フィルタ プロパティだけでも優れたサポートを提供しますが、FF などの古いブラウザではポリフィルが必要になる場合があります。

以上がCSS3 を使用して SVG ドロップ シャドウを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。