SVG在某些情况下会在Safari中过滤模糊 [英] SVG filters fuzzy in Safari under some circumstances

问题描述

我有一个带有交互式SVG的页面，该页面在Safari之外的所有浏览器(Firefox，Chrome甚至IE/Edge)上都不错，而Safari受到受其中一个SVG过滤器影响的所有内容都变成模糊糊糊(看起来像是在使用双线性插值放大的低分辨率画布.

I have an page with an interactive SVG which looks fine on all browsers (Firefox, Chrome, even IE/Edge) except Safari where everything affected by one of the SVG filters turns into a fuzzy mush (looks like something rendered onto a low-resolution canvas which got scaled up using bilinear interpolation).

现在这里有一个小的测试案例，问题也出现了:

Here now a small test case where the problem also appears:

<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上)上的外观:

How it looks on Apple Safari 11 (on OS X 10.13):

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

Compare that to Google Chrome and Mozilla Firefox respectively:

在查看其他SVG过滤器演示页面时网络，尽管效果显然不存在.不太清楚到底是什么原因造成的.我注意到的是，过滤面积越大(通过<filter>的width/height属性进行控制)，问题就变得更加明显.

When looking at other SVG filter demo pages on the web though the effect apparently isn't there. Not quite sure what exactly causes it. What I noticed is that the issue becomes more apparent the larger the filter area is (controlled through the width/height attributes of <filter>).

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

Is this a known issue? Under what circumstances does it occur? What are reasonable workarounds?

推荐答案

这不是错误. Safari正在惩罚您的过滤器声明中的语法错误:

This is not a bug. Safari is punishing you for incorrect syntax in your filter declaration:

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

根据规范，应将其读取为height ="30000％"和width ="30000％". Safari会说好吧，我猜你是这个意思"，并会自动调整过滤器分辨率，以便它不会为这个非常大的缓冲区分配大量内存->因此分辨率很低.

According to spec, this should be read as height="30000%" and width="30000%". Safari is saying "ok I guess you meant this" and adjusting the filter resolution automatically so it doesn't allocate a huge piece of memory to this very large buffer -> hence crappy resolution.

如果您的意思是300％-那么您需要投入300％.这是一个解决方法:

If you meant 300% - then you need to put 300%. This is one fix:

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

如果您的意思是300px(实际上是userSpace单位)，那么这是另一种解决方法:

If you meant 300px (really userSpace units) - then this is another fix:

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

您必须通过指定userSpaceOnUse来明确告知Safari您是指像素(否则它将使用默认的默认objectBoundingBox)

You must explicitly tell Safari that you mean pixels by specifying userSpaceOnUse (otherwise it uses the silent default objectBoundingBox)

另一个解决方案-通过显式指定filterRes来替代Safari的过滤器分辨率调整. filterRes在新的Filters 1.0规范中已弃用，并已从最新的Chrome& Firefox，但Safari仍然支持它.由于这将导致很大的内存占用(并且很难相信您打算像以前那样调整过滤器的大小)-不建议这样做.但是，无论如何-为了完整性.

Another fix - is to over-ride Safari's filter resolution adjustment by explicitly specifying a filterRes. filterRes has been deprecated in the new Filters 1.0 spec and already removed from latest Chrome & Firefox, but Safari still supports it. Since this will result in a big memory hit(and it's hard to believe that you meant to size your filter as you did) - this is not recommended. But whatever - for completeness.

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

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

(Two other minor notes - you can make your filters less wordy by using self-closing elements. And the blur adjustment you're doing doesn't lighten the blur, it just dials up the opacity fwiw.)

这篇关于SVG在某些情况下会在Safari中过滤模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！