8

I am able to draw the same thing, using both Polyline and Path, but when it is rendered, I see the difference. That is why the question -

<svg xmlns="http://www.w3.org/2000/svg">
<polyline points="200 100, 220 120, 280 120, 300 100" style="stroke:red; stroke-width:2px; fill:none" />
<path d="M200 100 L220 150 H280 L300 100" style="stroke:blue;stroke-width:2px; fill:none" />
</svg>

You see the horizontal line, although both are 2px but one appears thinner. Why? View it here https://jsfiddle.net/xeafLqjp/

Jay
  • 744
  • 4
  • 14
  • 30

1 Answers1

10

No, there's no difference.

You've drawn one of the lines half way off the canvas though. If you don't specify a height for the <svg> element it defaults to 300 x 150 px. One of your lines is drawn at 150px from the top of the canvas so half its width is clipped off.

You could always make the canvas bigger.

<svg height="200px" xmlns="http://www.w3.org/2000/svg">
<polyline points="200 100, 220 120, 280 120, 300 100" style="stroke:red; stroke-width:2px; fill:none" />
<path d="M200 100 L220 150 H280 L300 100" style="stroke:blue;stroke-width:2px; fill:none" />
</svg>
Robert Longson
  • 118,664
  • 26
  • 252
  • 242