CODEWITHSUNDEEP
svgpolyline
Jay
Jay

Reputation: 782

Polyline vs Path: Is there any difference

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/

Upvotes: 9

Views: 9733

Answers (1)

Robert Longson
Robert Longson

Reputation: 124059

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>

Upvotes: 10

Related Questions