我有一个带有交互式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进行比较:
在查看other SVG filter demo pages on the web时虽然效果显然不存在。不太确定究竟是什么导致它。我注意到,过滤区域越大(通过width
的{{1}} / height
属性控制),问题就越明显。
这是一个已知问题吗?在什么情况下会发生?什么是合理的解决方法?
答案 0 :(得分:4)
这不是错误。 Safari正在惩罚您过滤器声明中的错误语法:
<filter id="filter" y="-100" x="-100" height="300" width="300">
根据规范,这应该被理解为height =“30000%”和width =“30000%”。 Safari说“好吧我猜你的意思是这个”并自动调整过滤器分辨率,因此它不会为这个非常大的缓冲区分配大量内存 - &gt;因此蹩脚的决议。
如果你的意思是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&amp; Firefox,但Safari仍然支持它。因为这会导致很大的内存损失(并且很难相信你的意思是像过滤那样调整过滤器的大小) - 不建议这样做。但无论如何 - 为了完整性。
<filter id="filter" y="-100" x="-100" height="300" width="300" filterRes="100000">
(另外两个小音符 - 你可以通过使用自动关闭元素使你的滤镜不那么罗嗦。你正在做的模糊调整不会减轻模糊,它只是拨出不透明度fwiw。)