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

Question

我有一个带有交互式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上）上的外观：

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

在网上查看其他SVG过滤器演示页面时，虽然效果显然不存在。不太清楚是什么原因造成的。我注意到的是，过滤器面积越大（通过的width/ height属性控制），问题就会变得更加明显<filter>。

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

Answer 1

这不是错误。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的过滤器分辨率调整。新的Filters 1.0规范中不推荐使用filterRes，并且已经从最新的Chrome和Firefox中删除了，但Safari仍然支持它。由于这会导致很大的内存占用（而且很难相信您打算像以前那样调整过滤器的大小）-不建议这样做。但是无论如何-为了完整性。

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

（另外两个小注释-您可以通过使用自动关闭元素来使滤镜变得不那么冗长。您正在执行的模糊调整不会减轻模糊效果，而只是增加了不透明度。）