仅当应用滤镜时，SVG元素才会在视网膜上像素化
仅当应用滤镜时，SVG元素才会在视网膜上像素化
提问于 2021-01-08 06:13:03
如果我对SVG path元素应用滤镜，它会意外地在视网膜屏幕上出现像素化。没有滤镜，它看起来很好很平滑。
我使用高斯模糊和颜色矩阵：
<filter id="svg-filter-rounded-corners" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="3" />
<feColorMatrix mode="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 50 -25" />
</filter>下面是一个可重现的例子。左边的圆圈有滤镜，右边的圆圈没有。
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 0 400 200">
<defs>
<filter id="filter" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="3" />
<feColorMatrix mode="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 50 -25" />
</filter>
</defs>
<circle filter="url(#filter)" cx="100" cy="100" r="90" fill="none" stroke="#221C35" stroke-width="10" />
<circle cx="300" cy="100" r="90" fill="none" stroke="#221C35" stroke-width="10" />
</svg>
这在MacOS上的Chrome和火狐浏览器中都有发生。
有什么我可以做的，以保持路径平滑，即使应用了过滤器？
Stack Overflow用户
回答已采纳
发布于 2021-01-08 07:53:45
即使在Chrome/Windows上，这也是易碎的。问题是您为feColorMatrix使用的值太大了。它完全破坏了抗锯齿功能。尝试：
<feColorMatrix mode="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 8 -4" />这会给出更合理的结果。如果您不喜欢这个结果，可以尝试使用feComponentTransfer而不是feColorMatrix对不透明度进行更详细的操作。
<feComponentTransfer>
<feFuncA type="table" tableValues = "0 0 0 0 0.5 1 1 1 1 1 1 1 1 1 1 1"/>
</feComponentTransfer>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65620684
复制相关文章
相似问题
腾讯云开发者
