CODEWITHSUNDEEP
javascriptsvg
nickadams77181
nickadams77181

Reputation: 13

How to draw sharp, 1px lines in SVG (using js)?

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.

Upvotes: 0

Views: 281

Answers (1)

Rohit Dhas
Rohit Dhas

Reputation: 227

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

Upvotes: 0

Related Questions