web-dev-qa-db-ja.com

CSSを介してドロップシャドウフィルターをSVG固有の要素/パスに適用する方法

CSSを介してインラインに配置されたSVG内の特定の要素/パスにドロップシャドウフィルターを適用したいのですが、必要ありません全体が必要ですシャドウされるグラフィック、その中の要素のみ。

.shadow {
  fill: red;
  
  -webkit-filter: 
    drop-shadow( 3px 3px 2px rgba(0,0,0,.7) );
          filter: 
    drop-shadow( 3px 3px 2px rgba(0,0,0,.7) );
}
  <svg height="150" width="150">
    <g>
<path d="M0,0 C-72,132 -72,-26 100,100"></path>
    </g>
    <g class="shadow" >
    <circle class="shadow" cx="100" cy="100" r="20"></circle>
    </g>
  </svg>

上記のように、SVGの赤い円の要素にドロップシャドウを適用しようとしていますが、機能していません。

周りを検索しても、これに関する特定の情報は見つかりませんでした コメントはわずかです 他のSVG関連の質問では、単一のSVG要素では機能しないと述べていますが、多くの説明はありません。

[〜＃〜]更新[〜＃〜]

コメントで @azeós が指摘しているように、Firefox（v。43.0.2）で正しくレンダリングされているので、Chrome固有の問題です。とにかくコメントで提案されているように、SVGコードをいじることなくこのクロスブラウザーを作成しますか？

csssvgsvg-filters
8
Gruber

シャドウを作成するオブジェクトで色を選択し、シャドウを作成してから、元のグラフィックの下にマージすることで、シャドウを選択的に適用できます。ただし、CSSフィルターのSVGフィルターTrapdoorを介して行う必要があります。これはIEでは機能しません。 （だから...ハッキーですが、可能です）

仕様はこちら：w3.org/TR/SVG11/filters.html#feColorMatrixElement

デモ玩具はこちら：
https://beta.observablehq.com/@gitmullany/filter-effects-using-svg-color-matrices

その行列は、すべての赤の値の不透明度を2倍にし、他のすべての不透明度をゼロにしてから1を減算します。効果は、rgb（255,0,0）であるものだけを100％の不透明度のままにすることです。

#mySVG {
   filter: url(#selective-shadow);
}

.shadow {
  fill: red;
}
<svg>
 <defs>
   <filter id="selective-shadow">
     <feColorMatrix type="matrix" values="0 0 0 0 0 
                                          0 0 0 0 0
                                          0 0 0 0 0 
                                          2 0 0 0 -1"/>
     <feGaussianBlur stdDeviation="3"/>
     <feOffset dy="2" dx="2"/>
     <feMerge>
       <feMergeNode/>
       <feMergeNode in="SourceGraphic"/>
     </feMerge>         
   </filter>
 </defs>
</svg>



<svg height="150" width="150" id="mySVG">
    <g>
<path d="M0,0 C-72,132 -72,-26 100,100"></path>
    </g>
    <g class="shadow" >
    <circle class="shadow" cx="100" cy="100" r="20"></circle>
    </g>
  </svg>
2
Michael Mullany

2018-03を更新：私もこれに関する情報を見つけることができず、結果がかなり一貫していないため、この問題についていくつかの実験を行いました。 TL; DRバージョンの場合 ポリフィルを使用する予定です またはSVG内でドロップシャドウを実行します。

コードペンの実験： http://codepen.io/staypuftman/pen/GoNoMq

Chrome 65 + Canary 67：

ChromeもEdgeCanaryもSVGオブジェクトのドロップシャドウのコンテキストでfilterまたは-webkit-filterを適切に尊重しませんが、単純なdivでは機能します。

enter image description here

Firefox 58/Quantum + Firefox 53：

SVGオブジェクトとHTMLオブジェクトの両方にかなりよく見えます。

enter image description here

Safari 10.1+

Safariは、10.1（およびおそらく10.0）シリーズでこの問題を修正しました。

enter image description here

Safari 9.x

SVG CSSドロップシャドウが表示されず、divドロップシャドウの不透明度が何らかの理由で低くなっています

enter image description here

IE11

何もありません。

enter image description here

16
serraosays

this CodePenで、動的に生成されたpathとtextに異なるドロップシャドウを追加しました。 ここ たとえば、#robbie img（2番目のリンク）の代わりにclassに適用できるクロスブラウザソリューションを見つけました。

#robbie img { filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";   filter: url(#drop-shadow);   -webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));   filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5)); }

最初のCodePen で、クラスを使用しない別の方法についてコメントしましたが、#numbers_dropshadows_filterと#strokes_dropshadows_filter<defs></defs>で定義されています。

乾杯

1
Riccardo Volpe