Html 如何在保持抗锯齿的同时呈现边缘清晰的 svg 元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22161624/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to render svg elements with crisp edges while still keeping anti-aliasing?
提问by brice
Is there a way to render svg elements with crisp edges while still keeping anti-aliasing?
有没有办法在保持抗锯齿的同时渲染具有清晰边缘的 svg 元素？
I'm creating a browser-based tool that works in modern browsers.
我正在创建一个可在现代浏览器中使用的基于浏览器的工具。
Playing around with the shape-renderingattribute doesn't give me the results I'm looking for.
使用shape-rendering属性并没有给我想要的结果。
I want my elements to have nice anti-aliasing so that the paths look smoothlike below with shape-rendering: auto:
我希望我的元素具有良好的抗锯齿效果，以便路径看起来像下面这样平滑shape-rendering: auto：
But I also want elements that don't require anti-aliasing, like the start box to look sharp and crisp, such as when rendered with shape-rendering: crispEdges:
但我也希望不需要抗锯齿的元素，例如开始框看起来清晰明快，例如在渲染时shape-rendering: crispEdges：
Is this possible? Am I looking to have my cake and eat it too?
这可能吗？我想吃蛋糕也吃吗？
回答by defghi1977
Perhaps you set shape-rendering property for root svg element.
You should set shape-rendering property for each shape elements, like this.
也许您为根 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>
回答by Paul LeBeau
If you want your boxes to appear sharp without any blurring due to antialiasing, and without using crispEdges mode, make sure the line edges are on pixel boundaries. So, for example, if your lines are an odd number of pixels wide, give them coordinates that are at 0.5 of a pixel.
如果您希望您的框看起来清晰而不会因抗锯齿而产生任何模糊，并且不使用crispEdges 模式，请确保线条边缘位于像素边界上。因此，例如，如果您的线条宽度为奇数个像素，则为它们提供 0.5 个像素的坐标。
<rect x="10.5" y="10.5" width="150" height="20"
stroke-width="1px" fill="none" stroke="black"/>
And on the boundary if the stroke width is even.
如果笔画宽度均匀，则在边界上。
<rect x="10" y="10" width="150" height="20"
stroke-width="2px" fill="none" stroke="black"/>
Of course, this only really works if your SVG is being rendered at 1:1. That is, it's not being rescaled by the browser. And only for lines that are horizontal and vertical.
当然，这只有在您的 SVG 以 1:1 呈现时才真正有效。也就是说，它不会被浏览器重新缩放。并且仅适用于水平和垂直的线条。
回答by Nick Alexeev
[I'm posting this as an answer rather than a comment, because I want to post a picture. Otherwise, this is a comment on the useful post by @defghi1977. +1 to him, by the way.]
[我将此作为答案而不是评论发布，因为我想发布一张图片。否则，这是对@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>
Produced
出品
This was rendered by Firefox 38.0.5 .
In Internet Explorer 11, both shape-renderingsetting produces the same result with anti-aliasing and not crisp.
这是由 Firefox 38.0.5 呈现的。
在 Internet Explorer 11 中，两种shape-rendering设置都会产生相同的结果，但具有抗锯齿功能且不清晰。
