SVG渲染（自动模糊）

Question

当我尝试渲染此svg样本时，该行自动模糊并具有2px高度：

<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" >                  
    <line x1="100" x2="400" y1="250" y2="250" stroke="black" />
</svg>

但是当Y坐标变为250.5时，一切正常 - 线的高度为1px。

这将是一个解决方案（添加0.5像素），但我需要在元素上使用缩放变换。转变后再次解决问题。

如何解决？ 感谢。

Answer 1

模糊是指抗锯齿。尝试清晰边缘渲染模式，例如：

<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" >                  
    <line x1="100" x2="400" y1="250" y2="250" stroke="black" shape-rendering="crispEdges" />
</svg>