CODEWITHSUNDEEP
svg
Mortennobel
Mortennobel

Reputation: 3481

Removing line between polygons in SVG

How to remove the line between two adjacent polygons in SVG:

    <svg width="200px" height="200px" viewBox="0 0 200 200">
    <polygon points="100 100,  100 200,  200 100" style="fill: blue; fill-opacity: 1; stroke: black;stroke-width: 0;" />
    <polygon points="200 200,  100 200,  200 100" style="fill: blue; fill-opacity: 1; stroke: black;stroke-width: 0;" />
    </svg>

In this case it could be solved by merging the two polygons - but this is not the case if the polygons has different colors.

Upvotes: 1

Views: 671

Answers (1)

Robert Longson
Robert Longson

Reputation: 124059

It's antialiasing so shape-rendering="crispEdges" would be one way to fix it.

<svg width="200px" height="200px" viewBox="0 0 200 200" shape-rendering="crispEdges">
    <polygon points="100 100,  100 200,  200 100" style="fill: blue; fill-opacity: 1; stroke: black;stroke-width: 0;" />
    <polygon points="200 200,  100 200,  200 100" style="fill: blue; fill-opacity: 1; stroke: black;stroke-width: 0;" />
</svg>

Upvotes: 5

Related Questions