I have a polygon with a list of holes (also polygons) within it. I want to draw it, preferably using <svg><polygon .../></svg>, the problem is that the shape is quite complicated, non-convex and using the fill-rule it creates a bad result.
for example with this code:
<html><body>
<!-- This is way I want it to look, where the red is a hole -->
<svg height="210" width="500">
<polygon points="0,0 50,30 100,0 50,100" style="fill:lime;stroke:purple;stroke-width:1;fill-rule:evenodd;"/>
<polygon points="70,30 70,25 75,25 75,30" style="fill:red;stroke:blue"/>
</svg>
<!-- This is way it actually looks -->
<svg height="210" width="500">
<polygon points="0,0 50,30 100,0 50,100 0,0 70,30 70,25 75,25 75,30" style="fill:lime;stroke:purple;stroke-width:1;fill-rule:evenodd;"/>
</svg>
</body></html>
This is the result:
When removing the stroke it looks even worse
Aucun commentaire:
Enregistrer un commentaire