读书人

怎么让SVG中1px的线条显示更清晰

发布时间: 2012-09-06 10:37:01 作者: rapoo

如何让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.

?

修改前效果:
怎么让SVG中1px的线条显示更清晰

修改后的效果:
怎么让SVG中1px的线条显示更清晰

?

?

读书人网 >Web前端

热点推荐