带有过滤器，feGaussianBlur和feColorMatrix的iOS/Safari上的SVG凸起 [英] SVG bulge on iOS/safari with filter, feGaussianBlur and feColorMatrix

问题描述

我正在尝试使用svg获得粘糊糊的效果.Chrome的功能还不错，但在Safari& amp;上看起来很奇怪iOS.示例如下:

在Safari/iOS上的外观:

问题是，当一个圆圈太远，太小或丢失时，另一个圆圈凸出.在chrome上，这都不是问题.

代码:

 < svg版本="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 =模糊" mode =矩阵" 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"/><圆圈fill ="green" r ="15" cx ="80" cy ="95"/></g>< g filter ="url(#goo)">< circle fill ="blue" r ="20" cx ="160" cy ="50"/><圆圈fill ="green" r ="15" cx ="160" cy ="95"/></g>< g filter ="url(#goo)">< circle fill ="blue" r ="20" cx ="220" cy ="60"/><圆圈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)"><圆圈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><圆圈fill ="green" r ="15" cx ="450" cy ="95"/></g></svg> 

解决方案

Safari将feGaussianBlur的输出裁剪到默认的过滤器区域，然后再将其交给feColorMatrix.Chrome不会这么做.您可以通过扩展默认过滤器区域来解决此问题.

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

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>
  

解决方案

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

这篇关于带有过滤器，feGaussianBlur和feColorMatrix的iOS/Safari上的SVG凸起的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！