Using feGaussianBlur, feColorMatrix and feBlend in Safari

Question

I am using svg filter to create a "gooey" blend between three circles stacked vertically. In Chrome/Firefox (minus some smoothing) I get the desired effect. In Safari, I get something very choppy and ugly.

    <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

After reading around I've learned that Safari is very touchy with feGaussianBlur and the settings need to be set just right to get it to work properly.

Does anyone know the tweaks needed to get the desired effect across all browsers?

Answer 1

关于HTML内容的SVG过滤器在Safari上非常棘手。如果你看一下codepen上的粘糊糊的菜单示例，他们会非常精心设计以保持GPU上的所有内容 - 使用绝对位置，3D变换等。如果仔细观察，他们也不会扩展任何东西。我建议只使用javascript动画在SVG中完成界面的那些部分。这样你就不必解决Safari的怪异问题。