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

Question

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

下面是一个同样出现问题的小测试用例：

<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 上）：

将其分别与 Google Chrome 和 Mozilla Firefox 进行比较：

在查看 other SVG filter demo pages on the web 时，虽然效果显然不存在。不太确定到底是什么原因造成的。我注意到的是，过滤区域越大（通过 <filter> 的 width/height 属性控制），问题变得更加明显。

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

Answer 1

这不是错误。 Safari 因过滤器声明中的语法错误而惩罚您：

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

根据规范，这应该读作高度="30000%" 和宽度="30000%"。 Safari 正在说 "ok I guess you meant this" 并自动调整过滤器分辨率，因此它不会为这个非常大的缓冲区分配大量内存 -> 因此分辨率很差。

如果您的意思是 300% - 那么您需要输入 300%。这是一个修复：

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

如果您的意思是 300 像素（实际上是用户空间单位）- 那么这是另一个修复方法：

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

（另外两个小注意事项 - 您可以通过使用自闭合元素使您的过滤器不那么冗长。并且您正在进行的模糊调整不会减轻模糊，它只是调高不透明度。）

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

SVG filters fuzzy in Safari under some circumstances

safari

svg

mobile-safari

d3.js

svg-filters