对于直线一般是希望浏览器关闭反锯齿 而圆这类的则希望平滑,在svg中提供了 shape-rendering参数来控制浏览器渲染方式,但是在实际有些应用场景下却不起作用。
反锯齿似的颜色和像素都进行了平滑
stroke-width为1piexl 时加shape-rendering="crispEdges"可以关闭反锯齿
<line x1="0" y1="0" x2="0" y2="200" stroke-width="1" shape-rendering="crispEdges"></line>
在一个带viewBox、filter等复杂的SVG上却发现只有fireFox保持了1个像素的宽度,说明设置并没有对浏览器起作用。fireFox起效果的原因只是在于其对X和Y轴方向采用的策略。
一种方法是在svg root加 参数,但这会影响整个svg
另一种是在viewBox上x,y各自添加0.5 , 但是该方法也不能解决存在viewBox和 svg原始大小不一致情况下的反锯齿问题。
在stackoverflow 上找到的http://jsbin.com/aritem/4/edit?html,js,output
<style>svg { margin-bottom:5px; border:1px solid #ccc; } </style>
<!-- example 1 tweak viewBox's origin and size //-->
<svg width="450" height="230" viewBox="-0.5 -0.5 451 231">
<!-- straight line //-->
<path d="M 100 79 l -56 0 " stroke="rgba(0,0,0,1)" stroke-width="1"></path>
<!-- rect(s) //-->
<path d="M 215 122 l 204.95 0 l 0 89 l -316.95 0 l 0 -89 l 64 0 M 167 122 l 0 -40 l 48 0 l 0 40 M 215 122 l 0 45 l -48 0 l 0 -45" fill="rgba(0,0,0,0)" stroke="blue"stroke-width="1"></path>
<!-- rounded 10px line //-->
<path d="M 40 39 l 339.95 0" stroke="red" stroke-width="10"></path>
</svg>
<!-- example 2 tweak viewBox's origin //-->
<svg width="450" height="230" viewBox="-0.5 -0.5 450 230">
<!-- straight line //-->
<path d="M 100 79 l -56 0 " stroke="rgba(0,0,0,1)" stroke-width="1"></path>
<!-- rect(s) //-->
<path d="M 215 122 l 204.95 0 l 0 89 l -316.95 0 l 0 -89 l 64 0 M 167 122 l 0 -40 l 48 0 l 0 40 M 215 122 l 0 45 l -48 0 l 0 -45" fill="rgba(0,0,0,0)" stroke="blue"stroke-width="1"></path>
<!-- rounded 10px line //-->
<path d="M 40 39 l 339.95 0" stroke="red" stroke-width="10"></path>
</svg>
<!-- example 3 round moveTo commands and stroke-width //-->
<svg width="450" height="230">
<!-- straight line //-->
<path d="M 100.5 79.5 l -56 0 " stroke="rgba(0,0,0,1)" stroke-width="1"></path>
<!-- rect(s) //-->
<path d="M 215.5 122.5 l 204.95 0 l 0 89 l -316.95 0 l 0 -89 l 64 0 M 167.5 122.5 l 0 -40 l 48 0 l 0 40 M 215.5 122.5 l 0 45 l -48 0 l 0 -45" fill="rgba(0,0,0,0)" stroke="blue"stroke-width="1"></path>
<!-- rounded 10px line //-->
<path d="M 40.5 39.5 l 339.95 0" stroke="red" stroke-width="10.5"></path>
</svg>