如何在SVG中绘制清晰的1px线条(使用js)？

Question

我想在SVG中绘制1px的线条，水平、垂直或对角线，但由于某些原因，如果我将笔划宽度设置为1，笔划颜色设置为黑色，它将显示为2px的灰色线条。有人建议使用shape-rendering="crispEdges"，但我看不到效果。有人能帮帮忙吗？下面是一个包含三行代码的jsfiddle：

https://jsfiddle.net/3vr51tkj/

​

  <svg shape-rendering="crispEdges" style="position: absolute; left: calc(26vw + 3px); top: 10; width: calc(2.1vw + 1px); height: 12cm;">
   <line xmlns="http://www.w3.org/2000/svg" x1="0" y1="120.94488341347886" x2="36" y2="120.94488341347886" stroke="black" shape-rendering="crispEdges"></line>

  <line xmlns="http://www.w3.org/2000/svg" x1="0" y1="166.29921469353343" x2="36" y2="11.645684467356698" stroke="black" shape-rendering="crispEdges"></line>

  <line xmlns="http://www.w3.org/2000/svg" x1="0" y1="347.7165398137517" x2="36" y2="347.7165398137517" stroke="red" stroke-width="0.5" shape-rendering="crispEdges"></line>
</svg>

​

正如您所看到的，具有0.5笔划宽度的红色线条实际上具有所需的1px宽度，但颜色会褪色。

Answer 1

​

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <line x1="0" y1="0" x2="0"   y2="100" style="stroke:#540CA0;" stroke-width="1px">

</svg>

​

试试这个..。您可以更改坐标，使其垂直、水平和对角线。