在某些情况下，SVG在Safari中过滤模糊

Posted 2021-05-02

我有一个带有交互式SVG的页面，在除了Safari之外的所有浏览器（Firefox，Chrome，甚至是IE / Edge）上看起来都很好，其中受SVG过滤器影响的所有东西都变成了模糊的东西（看起来像渲染到低分辨率的东西）使用双线性插值放大的画布。

这里现在是一个小问题，也会出现问题：

<svg>
  <defs>
    <filter id="filter" y="-100" x="-100" height="300" width="300">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3.5"></feGaussianBlur>
      <feColorMatrix type="matrix" values="0 0 0 2 0   0 0 0 2 0   0 0 0 0 0   0 0 0 1 0" result="lightenedBlur"></feColorMatrix>
      <feMerge>
        <feMergeNode in="lightenedBlur"></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
      </feMerge>
    </filter>
  </defs>
  <g>
    <rect x="10" y="10" width="100" height="100" fill="blue" filter="url(#filter)"></rect>
  </g>
</svg>

它在Apple Safari 11上的外观（在OS X 10.13上）：

分别与谷歌Chrome和Mozilla Firefox相比：

当看着other SVG filter demo pages on the web虽然效果显然不存在。不太确定究竟是什么导致它。我注意到的是，过滤面积越大（通过width的height / <filter>属性控制），问题就越明显。

这是一个已知的问题？在什么情况下会发生？什么是合理的解决方法？

答案

这不是一个错误。 Safari正在惩罚您过滤器声明中的错误语法：

<filter id="filter" y="-100" x="-100" height="300" width="300">

根据规范，这应该被理解为height =“30000％”和width =“30000％”。 Safari说“好吧我猜你的意思是这个”并自动调整过滤器分辨率，因此它不会为这个非常大的缓冲区分配大量的内存 - >因此蹩脚的分辨率。

如果你的意思是300％ - 那么你需要投入300％。这是一个修复：

<filter id="filter" y="-100%" x="-100%" height="300%" width="300%">

如果你的意思是300px（真的是userSpace单位） - 那么这是另一个修复：

<filter id="filter" y="100" x="-100" height="300" width="300" filterUnits="userSpaceOnUse">

您必须通过指定userSpaceOnUse明确告诉Safari您的意思是像素（否则它使用静默默认的objectBoundingBox）

另一个解决方法是通过明确指定filterRes来覆盖Safari的过滤器分辨率调整。 filterRes已在新的Filters 1.0规范中弃用，已从最新的Chrome和Firefox中删除，但Safari仍然支持它。因为这会导致很大的内存损失（并且很难相信你的意思是像过滤那样调整过滤器的大小） - 不建议这样做。但无论如何 - 为了完整性。

<filter id="filter" y="-100" x="-100" height="300" width="300" filterRes="100000">

（另外两个小音符 - 你可以通过使用自动关闭元素使你的滤镜不那么冗长。你正在做的模糊调整不会减轻模糊，它只是拨出不透明度fwiw。）