向 SVG 圆圈添加过滤器 feGaussianBlur 在 Safari 和 Chrome 上消失了答案

【问题标题】：Adding filter feGaussianBlur to SVG circle is disappeared on Safari, on Chrome向 SVG 圆圈添加过滤器 feGaussianBlur 在 Safari 和 Chrome 上消失了
【发布时间】：2021-01-30 21:06:10
【问题描述】：

我正在将带有 feGaussianBlur 的过滤器添加到 SVG 圆圈中，它在 Chrome 上就像魅力一样，但圆圈在 Safari 上消失了。

     <filter
        id="soft"
        filterRes="1200"
        colorInterpolationFilters="sRGB"
        x="-50%"
        y="-50%"
        width="200%"
        height="200%"
     >
        <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
   {circles.map(circle => {
      return (
        <circle
          r={baseBubbleR}
          style={{
          filter: skillType === 'soft' ? 'url(#soft)' : '',
          fill: circleColor
        />
       )
     })

我在这里尝试了一些解决方案，例如扩展区域等... 任何帮助表示赞赏

【问题讨论】：

删除 filterRes 和 colorInterpolationFilters 看看是否有效。
运气不好。 :(, @MichaelMullany
在没有过滤器的情况下，圆是否在 Safari 上呈现？
是的，它会渲染。像正常的圆圈。我想我已经接近解决这个问题了。谢谢
您的 id 可能重复？

标签： html css reactjs svg

【解决方案1】：

我能够解决这个问题，我认为这不完全是 SVG 问题。

所以我必须为 Safari 上的每个圆圈设置不同的过滤器。在全局过滤器适用于不同浏览器时正确呈现每个过滤器。

{circles.map((circle, index) => {
  return (
    <div key={`circle-${index}`}>
      <filter
        id={`circle-${index}`}
        filterRes="1200"
        colorInterpolationFilters="sRGB"
        x="-50%"
        y="-50%"
        width="200%"
        height="200%"
      >
        <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
      </filter>
      <circle
        r={baseBubbleR}
        style={{
        filter: skillType === 'soft' ? 'url(#soft)' : '',
        fill: circleColor
      />
     </div>
   )
 })

以上代码只是示例。

【讨论】：

如果您要创建多个具有相同 id 的元素，即 id="soft" 那么这是无效的，以后可能会咬你。
@RobertLongson，感谢您指出这一点。实际上，真正的代码与此有些不同。更新