Question

我正在尝试用CSS设置一些Path / SVG-Elements的样式。特别是我试图将模糊应用到他们的边界。由于元素是从库（leaflet.clustermarkers）创建的，因此我无法控制SVG / Path元素本身的创建。该库提供了一个“类”，我可以用它来通过CSS选择它们。

以下是有效的：

.poligonArea{  

  fill:black;

}

但以下内容仅适用于Firefox，但不适用于Chrome或Safari：

.poligonArea{  

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

为什么它不适用于Chome / Safari？他们应该支持svg-filters，不是吗？

Answer 1

所以我做了以下似乎有效的工作

我将这个带有指定过滤器的svg-tag（在我的情况下我想要高斯模糊）添加到index.html / DOM

<div className="row">
    <div className="eight columns offset-by-two">
      <nav className="appFooter-nav">
        <Link to="/listeners" className="appFooter-nav-link">Life Guides</Link>
        <Link to="/mission" className="appFooter-nav-link">Mission</Link>
        <Link to="/contact" className="appFooter-nav-link">Contact</Link>
        <Link to="/legals" className="appFooter-nav-link">Legals</Link>
      </nav>
    </div>
</div>

（width =“200％”height =“200％”确保我的模糊不会从元素边框切断）

然后在css文件中我添加了这个：

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

通过CSS为类添加样式（模糊）SVG

1 个答案: