☰

CSS3を使用したSVGドロップシャドウ 質問する

tag-icon • tag-icon html css svg svg-filters
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>

ベストアンサー1

CSSを使用するfilter財産。

Webkitブラウザでサポートされています、Firefox 34+ および Edge。

これを使えばポリフィルFF < 34、IE6+ をサポートします。

次のように使用します:

/* Use -webkit- only if supporting: Chrome < 54, iOS < 9.3, Android < 4.4.4 */

.shadow {
  -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
  filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
  /* Similar syntax to box-shadow */
}
<img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Star_wars2.svg" alt="" class="shadow" width="200">

<!-- Or -->

<svg class="shadow" ...>
  <rect x="10" y="10" width="200" height="100" fill="#bada55" />
</svg>

<!-- Or -->

<svg>
  <g fill="none" stroke="#decade" stroke-width="2" transform="scale(2)">
    <circle class="shadow" cx="20" cy="20" r="19"/>
    <path class="shadow" d="M 20,1 V 39"/>
    <path class="shadow" d="M 20,1 V 20" transform="rotate(135, 20, 20)"/>
    <path class="shadow" d="M 20,1 V 20" transform="rotate(225, 20, 20)"/>
  </g>
</svg>

box-shadowこのアプローチは、不透明度を考慮し、ドロップ シャドウ効果をボックスではなく SVG 要素自体のアウトラインに適用するという点で、CSS 効果とは異なります。

注: この方法は、クラスが要素に<svg>のみ配置されている場合に機能していました。現在は、 などのインライン svg 要素でこれを使用できます<rect>。

CSSフィルターについてさらに詳しくここ。

おすすめ記事