svg anti-blur shape-rendering 存在

作者: shirleyR | 来源:发表于2017-08-11 18:10 被阅读0次

svg anti-blur shape-rendering 存在
Android图片之svg
SVG的使用
资源
(第六天)HTML5之SVG的了解与使用&Web数据存储
如何制作Iconfont（Photoshop+Illustrat
svg standalone
SVG学习笔记
一步步教你用CSS添加SVG过滤器
SVG

对于直线一般是希望浏览器关闭反锯齿而圆这类的则希望平滑，在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

image.png

<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>