ios - iOS/safari 上的 SVG 凸起，带有滤镜、feGaussianBlur 和 feColorMatrix

Question

我正在尝试使用 svg 获得粘稠的效果。在 Chrome 中一切正常，但在 Safari 和 iOS 上看起来很奇怪。示例如下:https://codepen.io/rubenhak/project/editor/ZoBENL

它在 Chrome 上的外观:

它在 Safari/iOS 上的外观如何:

问题是当一个圆太远、太小或缺失时，另一个圆就会凸出。这些在 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">