Html Safari与SVG foreignObject中放置阴影的兼容性问题

在SVG中的

foreignObject

中的元素上使用

dropshadow

时，当该元素在Chrome和Safari上正常工作时，该元素在Safari上不会显示在正确的位置和比例

以下是我的SVG代码：

一些文本

还有我的CSS代码：

.wrapper{
宽度：100%；
身高：100%；
显示器：flex；
证明内容：中心；
对齐项目：柔性端；
}
.元素{
最小高度：24px；
最大宽度：130像素；
背景色：#C4E7EE；
边界半径：4px；
填充：4px；
颜色：#0A99B7；
过滤器：放置阴影（0px 2px 4px rgba（128，128，128，0.4））；/*有问题的放置阴影*/
利润率：12像素；
}

删除放置阴影时，元素将放置在正确的位置和比例。您可以在此JSFIDLE上尝试：

目前，我通过删除阴影找到了以下解决方法：

@介质并非全部和（最小分辨率：.001dpcm）{
@支持（-webkit外观：无）和（显示：flow root）{
.元素{
过滤器：未设置；
}
}
}

---

但我想知道是否有更好的解决方案？

foreignObject是一个非常有缺陷的元素，看起来。。。但是当你需要使用它们时，解决方案是什么呢？用HTML画布替换SVG？您可以使用SVG文本，但随后您必须手动计算换行和间距，这是一件非常麻烦的事情，而且您必须做大量的跨浏览器测试，因为您永远不知道何时会在某些浏览器中遇到带有bug的SVG文本属性。有一些库可以提供帮助（比如-没有使用过）