svg anti-blur shape-rendering 存在的问题

对于直线一般是希望浏览器关闭反锯齿 而圆这类的则希望平滑,在svg中提供了 shape-rendering参数来控制浏览器渲染方式,但是在实际有些应用场景下却不起作用。
反锯齿似的颜色和像素都进行了平滑

stroke-width为1piexl 时加shape-rendering="crispEdges"可以关闭反锯齿


在一个带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

svg anti-blur shape-rendering 存在的问题_第1张图片
image.png





  
  
  
  
  
   





  
  
  
  
  
   





  
  
  
  
  
   

你可能感兴趣的:(svg anti-blur shape-rendering 存在的问题)