使用过滤器、feGaussianBlur 和 feColorMatrix 在 iOS/safari 上 SVG 凸起

Question

我正在尝试使用 svg 获得粘性效果。在 chrome 中一切正常，但在 Safari 和 iOS 中看起来很奇怪。这是示例：https://codepen.io/rubenhak/project/editor/ZoBENL

它在 Chrome 上的样子：

它在 Safari/iOS 上的样子：

问题是当一个圆圈太远、太小或缺失时，另一个圆圈就会凸起。 None 这是 chrome 上的一个问题。

代码：

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         viewBox="0 0 500 200" width="500" height="200">
      <defs>
        <filter id="goo" color-interpolation-filters="sRGB">
          <feGaussianBlur in="SourceGraphic" stdDeviation="8" 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 21 -7" result="cm" />
        </filter>
      </defs>
      <g >
        <circle fill="green" r="15" cx="30" cy="95" />
      </g>
      <g filter="url(#goo)">
        <circle fill="blue" r="30"  cx="80" cy="50" />
        <circle fill="green" r="15" cx="80" cy="95" />
      </g>
      <g filter="url(#goo)">
        <circle fill="blue" r="20"  cx="160" cy="50" />
        <circle fill="green" r="15" cx="160" cy="95" />
      </g>
      <g filter="url(#goo)">
        <circle fill="blue" r="20"  cx="220" cy="60" />
        <circle fill="green" r="15" cx="220" cy="95" />
      </g>
      <g filter="url(#goo)">
        <circle fill="blue" r="20"  cx="300" cy="50" />
        <circle fill="green" r="15" cx="300" cy="95" />
      </g>
      <g filter="url(#goo)">
        <circle fill="blue" r="10"  cx="350" cy="50" />
        <circle fill="green" r="15" cx="350" cy="95" />
      </g>
      <g filter="url(#goo)">
        <circle fill="green" r="15" cx="400" cy="95" />
      </g>
      <g >
        <circle fill="green" r="15" cx="450" cy="95" />
      </g>
    </svg>

Answer 1

Safari 正在将 feGaussianBlur 的输出裁剪到默认滤镜区域，然后再将其传递给 feColorMatrix。 Chrome 不会那样做。您可以通过扩展默认过滤区域来修复它。

<filter id="goo" x="-50%" width="200%" y="-50%" height="200%" color-interpolation-filters="sRGB">

使用过滤器、feGaussianBlur 和 feColorMatrix 在 iOS/safari 上 SVG 凸起

SVG bulge on iOS/safari with filter, feGaussianBlur and feColorMatrix

safari

svg

blur

ios

svg-filters