如何呈现清晰边缘的 svg 元素，同时仍然保持反锯齿？

是否有一种方法来呈现清晰边缘的 svg 元素，同时仍然保持反锯齿？

我正在创建一个基于浏览器的工具，可以在现代浏览器中工作。

使用 形状渲染属性并不能得到我想要的结果。

我想我的元素有很好的 反锯齿，使路径看起来平滑喜欢下面的 shape-rendering: auto:

enter image description here

但我也希望元素，不需要反锯齿，如 开始盒看起来锋利和脆，如时，与 shape-rendering: crispEdges渲染:

enter image description here

这可能吗? 我是不是也想吃我的蛋糕？

78964 次浏览
小开
最佳答案

也许可以为根 svg 元素设置形状呈现属性。
您应该为每个形状元素设置形状呈现属性，如下所示。

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="10" y="10" width="150" height="20" shape-rendering="crispEdges"
fill="none" stroke="black"/>
<path d="M80,30l100,100" shape-rendering="optimizeQuality"
stroke="black" stroke-width="5"/>
</svg>
小开

如果您希望您的方块显示清晰，没有任何模糊，由于反锯齿，并没有使用 CrispEdges 模式，确保线边缘的像素边界。因此，例如，如果你的线是一个奇数个像素宽，给他们坐标在0.5个像素。

<rect x="10.5" y="10.5" width="150" height="20"
stroke-width="1px" fill="none" stroke="black"/>

并且在边界上如果行程宽度是偶数。

<rect x="10" y="10" width="150" height="20"
stroke-width="2px" fill="none" stroke="black"/>

当然，这只有在 SVG 以1:1呈现时才真正有效。也就是说，它没有被浏览器重新缩放。而且只对水平和垂直的线。

小开

[我把这个作为一个答案而不是一个评论，因为我想上传一张照片。否则，这就是对 有用的文章@defghi1977的注释。顺便说一句，他得1分。]

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="10" y="10" width="150" height="20" shape-rendering="crispEdges"
fill="none" stroke="black" />
<rect x="10" y="50" width="150" height="20" shape-rendering="auto"
fill="none" stroke="black" />
<path d="M40,30l100,100" shape-rendering="crispEdges"
stroke="black" stroke-width="5" />
<path d="M80,30l100,100" shape-rendering="auto"
stroke="black" stroke-width="5" />
</svg>

制作

enter image description here

这是由 Firefox38.0.5渲染的。
在 Internet Explorer 11中，两种 shape-rendering设置都能产生相同的抗锯齿效果，而且不脆。


提交答案