造型(模糊)通过CSS进行类的SVG

Question

我正在尝试使用CSS样式来设置一些路径/SVG元素。特别是我试图对他们的边界进行模糊。由于这些元素是从库中创建的(feaflet.Clustermarkers(，因此我无法控制SVG/路径元素本身的创建。该图书馆提供给元素一个"类"，我可以用它通过CSS选择它们。

所以以下工作：

.poligonArea{  
  fill:black;
}

，但以下仅在firefox中起作用，但在chrome中也不适用于safari：

.poligonArea{  
  fill:black;
  filter: blur(5px);
  -webkit-filter: blur(10px);
}

为什么它在Chome/Safari中不起作用？他们应该支持SVG滤波器，否？

Answer 1

，所以我做了以下内容，似乎有效

我将此SVG标签添加到指定的过滤器(在我的情况下我想要高斯模糊(

<svg>
<defs>
    <filter id="mySVGfilter" x="-50%" y="-50%" width="200%" height="200%">
        <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
    </filter>
</defs>

(width =" 200％"高=" 200％"确保我的模糊不会与元素边界切断(

然后在CSS文件中添加了此信息：

.poligonArea{
  fill:black;
  filter: url('#mySVGfilter');
}