如何在保持抗锯齿的同时渲染具有清晰边缘的svg元素？

Question

有没有办法在保持抗锯齿的同时渲染具有清晰边缘的svg元素？

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

使用shape-rendering属性并不能提供我正在寻找的结果。

我希望我的元素具有良好的抗锯齿功能，以便路径看起来流畅，如下shape-rendering: auto：

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

这可能吗？我还想吃蛋糕吗？

Answer 1

也许您为root svg元素设置了shape-rendering属性 您应该为每个形状元素设置shape-rendering属性，如下所示。

<?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

[我发布这个作为答案而不是评论，因为我想发布一张图片。否则，这是对useful post by @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>

生产

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