我有一个带交互式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>
![Apple Safari 11 (on OS X 10.13) showing SVG filter issue](https://istack.dev59.com/yNN10.webp)
![Google Chrome not showing SVG filter issue](https://istack.dev59.com/dLk6w.webp)
![Mozilla Firefox not showing SVG filter issue](https://istack.dev59.com/SzDDW.webp)
<filter>
的width
/height
属性控制,滤镜区域越大,问题就越明显。
这是一个已知的问题吗?它发生在什么情况下?有哪些合理的解决方法?
result="lightenedBlur"
? - ccprog