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

问题

I'm trying to get a gooey effect with svg. Things are fine in chrome, but look weird on Safari & iOS. Here is the example: https://codepen.io/rubenhak/project/editor/ZoBENL

How it looks on Chrome:

How it looks on Safari/iOS:

The problem is when the one circle is too far, too small or missing, the other circle gets bulged. None of this is an issue on chrome.

Code:

    <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>

回答1:

Safari is clipping the output of the feGaussianBlur to the default filter region before handing it to the feColorMatrix. Chrome doesn't do that. You can fix it by expanding the default filter region.

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

来源：https://stackoverflow.com/questions/57742561/svg-bulge-on-ios-safari-with-filter-fegaussianblur-and-fecolormatrix

标签

ios

svg

safari

blur

svg-filters