在 Safari 中使用 feGaussianBlur、feColorMatrix 和 feBlend答案

【问题标题】：Using feGaussianBlur, feColorMatrix and feBlend in Safari在 Safari 中使用 feGaussianBlur、feColorMatrix 和 feBlend
【发布时间】：2017-01-08 09:15:38
【问题描述】：

我正在使用 svg 过滤器在垂直堆叠的三个圆圈之间创建一个“粘糊糊”的混合。在 Chrome/Firefox 中（减去一些平滑）我得到了想要的效果。在 Safari 中，我得到了一些非常不稳定和丑陋的东西。

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <defs>
        <filter id="goo" x="0" y="0" color-interpolation-filters="sRGB">
          <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
          <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
          <feBlend in="SourceGraphic" in2="goo" />
        </filter>
      </defs>
    </svg>

Here is a Link to my full CodePen

在阅读之后，我了解到 Safari 对 feGaussianBlur 非常敏感，需要将设置设置得恰到好处才能使其正常工作。

有谁知道在所有浏览器中获得所需效果所需的调整？

【问题讨论】：

**UPDATE1 ** 因为我无法让它工作，我最终制作了一个对象的 SVG 并将其粘贴在具有匹配颜色的圆圈后面。它似乎适用于所有浏览器。 Link to Updated Code

标签： css svg gaussian svg-filters

【解决方案1】：

HTML 内容上的 SVG 过滤器在 Safari 上非常棘手。如果您查看 codepen 上的粘性菜单示例，它们经过精心设计以将所有内容保留在 GPU 上——使用绝对位置、3D 变换等。如果您仔细观察它们，它们也不会缩放任何东西。我建议在 SVG 中使用 javascript 动画完全完成界面的这些部分。这样您就不必解决 Safari 的怪异之处。

【讨论】：