CSS のみを使用して SVG にドロップ シャドウを追加する方法

CSS3 を使用して SVG のドロップ シャドウを作成する方法

CSS3 を使用して SVG 要素のドロップ シャドウを作成することは可能ですか?次のようなもの:

box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;

フィルター効果を使用した影の作成に関する議論が発生しました。 CSSのみを使用した例はありますか?以下は、カーソル スタイルが適切に適用されますが、シャドウ効果が存在しない機能コードです。最小限のコードでシャドウ効果を実現するにはどうすればよいですか?

svg .shadow {
  cursor:crosshair; 
  -moz-box-shadow: -5px -5px 5px #888;
  -webkit-box-shadow: -5px -5px 5px #888;
  box-shadow: -5px -5px 5px #888; 
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full"  viewBox="0 0 120 70">  
    <rect class="shadow" x="10" y="10" width="100" height="50" fill="#c66" />
</svg>

解決策

CSS 'filter' 属性を使用します。

Webkit ブラウザ、Firefox と互換性があります。 34 、および Edge.

FF < をサポートするためにポリフィルが利用可能です。 34 および IE6 .

実装:

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

以上がCSS のみを使用して SVG にドロップ シャドウを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。