有没有办法在保持抗锯齿的同时呈现边缘清晰的 svg 元素？
我正在创建一个可在现代浏览器中使用的基于浏览器的工具。
玩弄shape-rendering 属性并没有给我想要的结果。
我希望我的元素具有良好的抗锯齿功能，以便路径看起来平滑，如下所示shape-rendering: auto：
但我也希望不需要抗锯齿的元素，例如 开始框看起来清晰明快，例如使用 shape-rendering: crispEdges 渲染时：
这可能吗？我是否也想拥有我的蛋糕并吃掉它？
【问题讨论】：
也许您为根 svg 元素设置了形状渲染属性。
您应该为每个形状元素设置 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>
【讨论】：
shape-rendering 属性只允许在根 svg 元素上使用。需要更好地阅读文档（我链接到的）......谢谢@defghi1977
crispEdges 进行放大和缩小时仍然遇到严重问题。当比例很小时，我的矩形的某些边缘会消失并以不同的缩放级别重新出现。这是另一个问题。
shape-rendering 属性的唯一允许值是：auto | optimizeSpeed | crispEdges | geometricPrecision。只有color-rendering 属性允许optimizeQuality。
如果您希望您的框看起来清晰而不会因抗锯齿而产生任何模糊，并且不使用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 渲染时才真正有效。也就是说，它不会被浏览器重新缩放。并且仅适用于水平和垂直的线条。
【讨论】：
[我将其发布为答案而不是评论，因为我想发布图片。否则，这是对 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 设置都产生相同的抗锯齿效果，但不清晰。
【讨论】：