Safari中SVG元素无法应用CSS滤镜，求原因及可行方案

我尝试为SVG内的元素添加简单的CSS滤镜，该效果在除Safari外的所有浏览器中均正常显示，但在Safari中滤镜未生效。请问这是Safari本身不支持为SVG元素应用CSS滤镜，还是我的实现存在问题？我了解可以使用svg-filter，但该方案在我的特定场景下不可行。

代码示例 #

CSS代码 #

svg{
  width: 200px;
  /*   filter here works in safari */
  /* filter: blur(5px); */
}

#circle{
  filter: blur(5px);
}

#square{
  filter: drop-shadow(30px 10px 4px #4444dd);
}

HTML代码 #

<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 187.7 106.3" style="enable-background:new 0 0 187.7 106.3;" xml:space="preserve">
<rect id="square" x="20.2" y="20" style="fill:#E30613;" width="66.7" height="66.7"/>
<circle id="circle" style="fill:#6AB42D;" cx="134.1" cy="53.4" r="33.4"/>
</svg>

效果对比 #

Safari中的效果 #

其他浏览器中的效果 #

这是Safari的兼容性限制问题：目前Safari仅支持给SVG根元素应用CSS滤镜，无法直接给SVG内部的<rect>、<circle>等图形元素单独设置CSS滤镜，这就是你看到根元素滤镜生效、子元素滤镜无效的原因。

如果不能使用SVG内置滤镜，可以试试以下两种替代方案：

• 方案1：将SVG转为CSS背景图
  把SVG代码转成Base64格式，作为普通HTML元素的background-image，再给该元素应用CSS滤镜。示例：

  .circle {
    width: 66.8px;
    height: 66.8px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJFYmVuZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKICAgIHZpZXdCb3g9IjAgMCAxODcuNyAxMDYuMyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTg3LjcgMTA2LjMiIHhtbDpzcGFjZT0icHJlc2VydmUiPgogIDxjaXJjbGUgaWQ9ImNpcmNsZSIgc3R5bGU9ImZpbGw6IzZBQjQyRCIgY3g9IjEzNC4xIiBjeT0iNTMuNCIgcj0iMzMuNCIvPgo8L3N2Zz4=');
    background-size: cover;
    filter: blur(5px);
  }
  

• 方案2：用<foreignObject>嵌入HTML元素
  在SVG内部通过<foreignObject>包裹HTML的<div>元素，给这些HTML元素设置样式和滤镜，Safari能正常识别这种方式的滤镜效果：

  <svg width="200" viewBox="0 0 187.7 106.3">
    <foreignObject x="20.2" y="20" width="66.7" height="66.7">
      <div style="width:100%;height:100%;background:#E30613;filter:drop-shadow(30px 10px 4px #4444dd);"></div>
    </foreignObject>
    <foreignObject x="100.7" y="20" width="66.8" height="66.8">
      <div style="width:100%;height:100%;background:#6AB42D;border-radius:50%;filter:blur(5px);"></div>
    </foreignObject>
  </svg>
  

内容的提问来源于stack exchange，提问作者rttmax