javascript - svg有毛边的问题

Question

用svg画出来的半弧和斜线有毛边

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">      
<path d="M150 150A100 100 0 0 1 250 150M300 100L100 660" stroke="black" stroke-width="1" fill="none"></path>
</svg>

还有就是有时画出来的线有些不清晰

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">

       <path d="M5 5H100" stroke="black" stroke-width="1" fill="none"></path>
       
    </svg>

这些毛边和不清晰的要怎么解决?

Answer 1

刚好这几天画svg也发现了这个情况。据我观察，当描边宽度为偶数的时候，线条会比较清晰，而奇数的时候，就会很粗糙。我猜想奇数宽度线条会在基准线两边出现0.5的宽度，跟浏览器渲染有关系吧，所以我现在会尽量用偶数宽度。