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

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

CSS3 を使用した SVG 要素のドロップ シャドウの作成は、特に従来のbox-shadow プロパティと -webkit-box-shadow プロパティ。ただし、CSS フィルターを使用する実行可能な回避策があります。

CSS フィルターの使用

CSS フィルターは、SVG 要素に視覚効果を適用する方法を提供します。このメソッドを使用してドロップ シャドウを作成するには、drop-shadow() で filter プロパティを使用できます。 function.

構文

.element {
  filter: drop-shadow(horizontal-offset vertical-offset blur-radius color);
}

例

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

互換性

drop-shadow() フィルターは最新のバージョンでサポートされています。以下を含むブラウザ:

• Webkit ブラウザ
• Firefox 34
• Edge

Polyfill

drop-shadow() をサポートしていないブラウザの場合フィルタでは、ポリフィルを使用できます。人気のあるポリフィルの 1 つは [CSS Shadow](https://github.com/mdn/css-shadow) です。これは Firefox のサポートを提供します。 34 および IE6 。

ドロップ シャドウの適用

任意の SVG 要素にドロップ シャドウを適用できます。要素にシャドウ クラスを追加するだけです。

<svg>
  <rect class="shadow" x="10" y="10" width="100" height="50" fill="#c66" />
</svg>

結論

CSS フィルターを使用すると、最小限のコーディング作業で SVG 要素のドロップ シャドウを作成できます。この手法は最新のブラウザと互換性があり、ポリフィルを使用したクロスブラウザ レンダリングをサポートします。

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