Question

我想通过CSS将内嵌式滤镜应用于内嵌SVG中的特定元素/路径，我不要需要整个图形被遮蔽，只是其中的一个元素。

＆＃13;

.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) );
}

＆＃13;

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

＆＃13;

正如您在上面所看到的，我尝试将渐变阴影应用于SVG的红色圆圈元素，但它无效。

搜索周围我还没有找到任何具体的信息，only few comments在其他SVG相关问题中只是声明它不能处理单个SVG元素，但没有太多解释。

更新

正如@azeós在评论中指出的那样，它正在使用Firefox（v.43.0.2）正确呈现，因此它是Chrome特定的问题。无论如何，如果不按照评论中的建议摆弄SVG代码，是否可以制作这个交叉浏览器？

Answer 1

更新2018-03：我在这个问题上做了一些实验，因为我也找不到任何关于此问题的信息，结果非常不一致。 TL; DR版本，如果您是going to have use a polyfill或只是在SVG中做阴影。

Codepen实验： http://codepen.io/staypuftman/pen/GoNoMq

Chrome 65 + Canary 67：

Chrome和Edge Canary都不会在SVG对象投影的上下文中正确地尊重nav div img.img-cls, nav img.img-cls { border: solid blue 1px; }或filter，但可以使用简单的-webkit-filter。

Firefox 58 / Quantum + Firefox 53：

对于SVG和HTML对象看起来都很不错。

Safari 10.1 +

Safari已在10.1（可能是10.0）系列中解决了这个问题。

Safari 9.x

由于某些原因，SVG CSS投影阴影未显示且div投影影片的不透明度较低

IE11

没有

Answer 2

您可以通过对要阴影的对象进行颜色选择，创建阴影然后将其合并到原始图形下来有选择地应用阴影。但是你必须通过CSS过滤器中的SVG过滤器陷门来实现 - 这在IE中不起作用。（所以... hacky，但可能）

规格在这里：w3.org/TR/SVG11/filters.html#feColorMatrixElement

演示玩具在这里：
https://beta.observablehq.com/@gitmullany/filter-effects-using-svg-color-matrices

该矩阵将所有红色值的不透明度加倍，将所有其他值的不透明度归零，然后减去1.效果是只留下100％不透明度的东西，即rgb（255,0,0）

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

Answer 3

在this CodePen中，我向动态生成的path和text添加了不同的 drop-shadows 。 Here我发现了一个跨浏览器的解决方案，例如，您可以将其应用于class，而不是#robbie img（在第二个链接中）：

#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)); }

在first CodePen中，我评论了另一种不使用 classes 的替代方法，但是它使用了#numbers_dropshadows_filter中定义的#strokes_dropshadows_filter和<defs></defs>

欢呼

如何通过CSS将阴影滤镜应用于SVG特定元素/路径

3 个答案:

Chrome 65 + Canary 67：

Firefox 58 / Quantum + Firefox 53：

Safari 10.1 +

Safari 9.x

IE11