在某些情况下，Safari中的SVG滤镜会变得模糊。

Question

我有一个带交互式SVG的页面，在所有浏览器（Firefox，Chrome，甚至IE / Edge）上看起来都很好，但在Safari上，受到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>

在苹果Safari 11上的效果（在OS X 10.13上）如下所示：
与此相比，Google Chrome和Mozilla Firefox分别如下所示：
但是，在查看网页上的其他SVG滤镜演示页面时，该效果似乎不存在。不太确定具体原因是什么。我注意到，通过<filter>的width/height属性控制，滤镜区域越大，问题就越明显。

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

- phk

---

你是否注意到两个滤镜原语使用了 result="lightenedBlur"？ - ccprog

@ccprog 已更改，但没有任何区别。 - phk

Answer 1

这不是一个bug。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%">

如果您指的是300像素（真正的用户空间单位）- 那么这是另一个修复方法：

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

您需要明确告诉Safari，您指的是像素，通过指定userSpaceOnUse（否则它将使用默认的objectBoundingBox）

另一个解决方法-是通过明确指定filterRes来覆盖Safari的滤镜分辨率调整。在新的Filters 1.0规范中，filterRes已被弃用并已从最新版本的Chrome和Firefox中删除，但Safari仍然支持它。由于这将导致大量内存占用（而且很难相信您想要按照您的方式调整滤镜大小），因此不建议这样做。但无论如何-为了完整性。

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

（另外两个小提示-您可以使用自闭合元素使过滤器更简洁。另外，您所做的模糊调整不会减轻模糊，而只是增加了透明度。）

- Michael Mullany

---

你说得对，真是有些尴尬，我想我以为百分比是默认单位。我猜我本可以创建一些虚拟过滤器来显示大小。不知道filterRes，我想知道它是否值得重新启用，以实现自动过滤区域的想法。 - phk

一点也不尴尬。SVG对于它应该接受的内容比HTML/CSS严格得多 - 而Chrome通过接受错误的语法误导了人们。 - Michael Mullany