时间戳

首页 > 解决方案 > 如何在 SVG 中绘制清晰的 1px 线条（使用 js）？

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

问题描述

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

标签： javascriptsvg

解决方案

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

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

推荐阅读