CODEWITHSUNDEEP
htmlcsssvg
dramasea
dramasea

Reputation: 3490

why there is a missing stroke on svg polygon

<!DOCTYPE html>
<html>
<body>

<svg width="500" height="500">
<polyline style="fill: lime; stroke: green; stroke-width: 3;" points="0,0,273,133,214,42"/>
</svg>

</body>
</html>

This is my code, may I ask why there is a missing stroke or border on one side of the polygon of the svg, but why this works?

<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:3" />

Upvotes: 0

Views: 984

Answers (2)

Robert Longson
Robert Longson

Reputation: 124289

The difference between a <polygon> and a <polyline> in SVG is that a polygon is closed i.e. it has an extra line that connects the last point back to the first point.

You can do this manually with a polyline by adding an extra point that is at the same location as the first point of course.

Upvotes: 3

Batu.Khan
Batu.Khan

Reputation: 3065

Add an extra 0,0 at the end.

points="0,0,273,133,214,42,0,0"

Upvotes: 2

Related Questions