Css 将阴影添加到svg多边形

在所附的片段中，我有一个多边形，我需要添加一个效果，使其看起来像这样：

我不知道如何在svg中实现这一点，如果是html，我想我会使用box shadow

看起来唯一的解决方案是使用，但我认为我只能在

元素上使用，所以我正在努力如何做到这一点

多边形{
填充：#5091b9；
行程：#4387b0；
笔画宽度：2；
}

---

您可以将

下拉阴影

过滤器应用于SVG，或者将SVG用作元素的背景并对其应用过滤器：

多边形{
填充：#5091b9；
行程：#4387b0；
笔画宽度：2；
}
.过滤器{
滤镜：投影（10px 0 5px红色）；
}
.盒子{
高度：100px；
宽度：100px；
背景：url（'data:image/svg+xml；utf8'）；
}

SVG元素

SVG作为背景

---

您可以使用SVG feOffset、feGaussianBlur、feBlend代替'feDropShadow'

是的，您可以在SVG上使用下拉阴影过滤器，您将在多边形周围有阴影，并且有许多这样的多边形。你是说我在svg元素中嵌套svg元素吗？如果在同一个svg中有许多元素，那么所有元素都将得到阴影。你可以将你的svg保存为一个单独的svg，其中包含

defs

，用于过滤器，并通过

使用xlink:href

应用它们，以避免混淆：svg过滤器用于HTML或svg内容元素，看见不需要

，您可以使用CSS

url（）

函数引用它们。在

元素本身上使用它们，如果与

viewBox

结合使用，甚至可能会有。这比我想的要好得多，+1要知道为什么过滤器没有应用在这个对我的源代码准确的小提琴中，我需要嵌套SVG。过滤器不能应用于嵌套svg吗？@dagda1我认为CSS过滤器不能用于嵌套svg。。在这种情况下，您可以考虑SVG筛选器，请参见updates@dagda1它在Firefox上工作。不过，其他一些浏览器在将CSS过滤器应用于SVG内容方面存在限制。flood color=“blue”是的，但从技术上讲，这些并不是阴影。如果你看到一个真实的阴影，它不会反映投射阴影的物体的颜色。@RobertLongson是的，不透明物体的阴影是暗的，但是透明物体的阴影呢。像红色的彩色玻璃之类的。无论如何，我只是建议另一种创建阴影的方法。@RobertLongson如果你想要黑色阴影，你必须在feOffset之前添加一个feColorMatrix原语：@Waruyama当然，然后你实现了一个feDropShadow，尽管没有浏览器可以做的内部优化。@RobertLongson这是正确的，但与feDropShadow不同，它在internetexplorer和Edge上工作。