如何在保持抗锯齿的同时呈现清晰边缘的svg元素？

有没有办法呈现边缘清晰的svg元素，同时仍然保持抗锯齿？

我正在创build一个适用于现代浏览器的基于浏览器的工具。

玩弄形状渲染属性不会给我我要找的结果。

我希望我的元素具有很好的抗锯齿效果，以便像下面的shape-rendering: auto path看起来平滑 shape-rendering: auto ：

但是我也想要不需要抗锯齿的元素，比如起始框看起来清晰明快 ，比如用shape-rendering: crispEdges ：

这可能吗？ 我想要吃我的蛋糕吗？

Answer 1

也许你为root 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> 

Answer 2

如果你希望你的盒子看起来很清晰，没有任何模糊的反锯齿，并且不使用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呈现时才有效。 也就是说，它不会被浏览器重新调整。 只适用于水平和垂直的线条。

Answer 3

[我发布这个答案，而不是一个评论，因为我想张贴图片。 否则，这是@ defghi1977对有用的post的评论 。 +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> 

生成

这是由Firefox 38.0.5呈现。
在Internet Explorer 11中，两种shape-rendering设置都会产生与抗锯齿效果相同的结果，而且不会变得清晰。