如何让SVG中1px的线条显示更清晰

在SVG中，画矩形框Rect，如果stroke-width:1px, 在浏览器下看边线变粗，不清晰，用PS看已经变成了2px。

具体解决办法参见链接：http://kilianvalkhof.com/2010/design/the-problem-with-svg-and-canvas

注意：Erik的comments：

 

For svg you can try the following:

- on the root svg element adjust the ‘viewBox’ attribute until you get the desired result for lines/rects in the svg (similar to adding 0.5px everywhere, but in one place instead of many).
- use ‘shape-rendering: optimizeSpeed’ to disable anti-aliasing on any (or some) elements. Since it’s a CSS property you can easily write a selector that applies it only to the elements you want.

 

修改前效果：

修改后的效果：