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

我想通过CSS对内嵌放置的SVG中的特定元素/路径应用阴影过滤器，我不需要对整个图形进行阴影处理，只需要其中的一个元素

.shadow{
填充物：红色；
-webkit过滤器：
投影（3p3p2pRGBA（0,0,0,7））；
过滤器：
投影（3p3p2pRGBA（0,0,0,7））；
}

---

更新2020-04:我在这个问题上做了一些实验，因为我也找不到关于这个问题的任何信息，结果非常不一致

TL；DR:SVG放置阴影非常不一致，但是HTML放置阴影可以可靠地工作（在IE11之外）。如果您想要SVG放置阴影，或者只是在SVG本身中放置阴影

代码笔实验：

铬81+金丝雀83： Chrome和edge-Canary-respect

filter

或

-webkit-filter

在SVG对象阴影的上下文中都不正确，但可以在简单的

div

上工作

Firefox 75+Firefox 53（量子之前）： 对于SVG和HTML对象来说都非常好

狩猎13+ Safari在早期版本中曾短暂使用过dropshadows，但现在又将其删除

狩猎10.1-11 Safari在10.1（可能还有10.0）系列中解决了这个问题

Safari 9.x SVG CSS dropshadow不显示，并且由于某些原因，

div

dropshadow的不透明度较小

边缘（铬版） 没有SVG dropshadows，但是HTML的效果很好

IE11 没什么

---

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

规范如下：w3.org/TR/SVG11/filters.html#feColorMatrixElement

演示玩具在这里：

该矩阵将所有红色值的不透明度加倍，将所有其他值的不透明度置零，然后减去1。其效果是只保留rgb（255,0,0）的100%不透明度

#mySVG{
过滤器：url（#选择性阴影）；
}
.影子{
填充物：红色；
}

在CodePen中，我为动态生成的

路径和
文本添加了不同的阴影。我找到了一个跨浏览器解决方案，您可以将其应用于
类
，例如，而不是
#robbie img
（在第二个链接中）：

在本文中，我评论了另一种不使用类的替代方法，但它使用了
\numbers\u dropshadows\u filter
和
\strokes\u dropshadows\u filter
中定义的

干杯
只是好奇，为什么不使用SVG过滤器来创建阴影呢？正如Harry所建议的，我认为放置阴影的最佳选择是SVG代码中的过滤器Yea应该在问题中指定，我希望避免由于工作流而弄乱SVG代码。这就是我看到的阴影。。。Waterbox 40.1.0，您使用哪种浏览器？哦，很好，我在使用chrome，我也能在Firefox上看到阴影。我猜这是一个Chrome业务。chrome的具体问题是什么？我已经更新了这项有趣的研究，谢谢！我不能在polyfill atm机上测试自己，你能确认它也在chrome上工作吗？我还没有试过polyfill，我明天就要做了，因为我在我的时区已经做了一天了。让我知道如果你给它一个机会。哦，哇，这是一些先进的SVG黑客，据我所知，它的工作！很不错的！我可以问一下矩阵网格的文档在哪里吗？：）规格在这里：演示玩具在这里：。该矩阵将所有红色值的不透明度加倍，将所有其他值的不透明度置零，然后减去1。其效果是只保留rgb（255,0,0）神圣SVG的100%不透明度！！我不知道你可以用SVG做这样的事情，该死的，我想我需要一些关于这个主题的更新x）谢谢！
#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)); }