如何通过CSS应用阴影过滤器到SVG特定元素/路径 [英] How to apply drop-shadow filter via CSS to SVG specific element/path

问题描述

我想通过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 =150width =150> < g>< path d =M0,0 C-72,132 -72，-26 100,100>< / path> < / g> < g class =shadow> < circle class =shadowcx =100cy =100r =20>< / circle> < / g> < / svg>  

m尝试应用一个阴影到SVG的红色圆圈元素，但它不工作。

搜索我还没有找到任何具体的信息，在其他SVG相关问题中

Firefox 42 + 43：

看起来很适合SVG和HTML对象。

Safari 9.x

SVG CSS dropshadow未显示， div dropshadow由于某种原因具有较少的不透明度

IE11

没有。

I'd like to apply a drop-shadow filter to a specific element/path inside an inline placed SVG via CSS, I don't need the whole graphic to be shadowed, just an element inside it.

.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>

As you can see above, I'm trying to apply a drop-shadow to the red circle element of the SVG, but it's not working.

Searching around I haven't found any specific info on this, only few comments in other SVG related questions simply stating that it doesn't work on single SVG elements, but without much explanations.

UPDATE

As pointed out by @azeós in the comments, it is rendering correctly with Firefox (v. 43.0.2) so it's a Chrome specific issue. Is there anyway to make this crossbrowser without fiddling out with the SVG code as suggested in the comments?

解决方案

I did some experiments on this issue because I too couldn't find any information on this and the results are pretty inconsistent. The TL;DR version if that you are going to have use a polyfill or just do the dropshadow within the SVG.

Codepen experiment: http://codepen.io/staypuftman/pen/GoNoMq

Chrome 47 + Canary 49:

Neither Chrome nor edge Canary respect filter or -webkit-filter properly in the context of an SVG object drop-shadow but do work on a simple div.

Firefox 42 + 43:

Looks pretty good for both SVG and HTML objects.

Safari 9.x

SVG CSS dropshadow does not show and the div dropshadow has less opacity for some reason

IE11

Nothing.

这篇关于如何通过CSS应用阴影过滤器到SVG特定元素/路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！