如何在 SVG 中绘制清晰的 1px 线条（使用 js）？答案

【问题标题】：How to draw sharp, 1px lines in SVG (using js)?如何在 SVG 中绘制清晰的 1px 线条（使用 js）？
【发布时间】：2021-04-08 06:19:43
【问题描述】：

我想在 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 宽度，但颜色变淡了。

【问题讨论】：

我推荐stackoverflow.com/questions/34229483/… 和stackoverflow.com/questions/23376308/…，这可能会有所帮助。我还怀疑，如果 0.5 笔画宽度符合您的要求，您可能会遇到由不同设备像素比引起的问题。

标签： javascript svg

【解决方案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>

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

【讨论】：

不要只写代码，还要解释一下。