0

I want to draw 1px lines, horizontal, vertical or diagonal, in SVG, but for some reason, if I set the stroke width to 1 and stroke color to black, it shows as a 2px grey line. Someone suggested to use shape-rendering="crispEdges", but I see no effect. can someone help? below is a jsfiddle with three lines:

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>

As you can see, the red line with 0.5 stroke width actually has the desired 1px width, but the color fades.

Robert Longson
  • 110,343
  • 23
  • 240
  • 227
nickadams77181
  • 13
  • 3
  • 1
    I recommend https://stackoverflow.com/questions/34229483/why-is-my-svg-line-blurry-or-2px-in-height-when-i-specified-1px and https://stackoverflow.com/questions/23376308/avoiding-lines-between-adjecent-svg-rectangles/23376793#23376793, which might help. I also suspect that you might be running into problems caused by different device pixel ratios, if the 0.5 stroke width does what you want. – Chris Lear Apr 08 '21 at 08:28

1 Answers1

0

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

Try This.. You can change co-ordinates to make it vertical horizontal and diagonal.

Rohit Dhas
  • 127
  • 1
  • 1
  • 8