2

How can I add multiple layers of SVG polygons in the same SVG? For example, I have a drawing of a car (see snippet) over here, what if I want to add a window on it? If I write the new window markup below the car markup (see snippet) it is not visible. If I write it above the car markup is overwritten.

<svg heght="100" width="100">
<!--bil-->  
<polygon points="0,100 0,70 5,65 20,65 30,40 70,40 80,65 95,65 100,70 100,100 90,100 80,90 70,100 30,100 20,90 10,100" style="fill:#777; stroke:#444; stroke-width:3px;">
  
<!--window-->  
<polygon points="30,30 50,30 50,50 30,50" style="fill:blue; stroke:#444; stroke-width:3px;">  

</svg>
08Dc91wk
  • 4,254
  • 8
  • 34
  • 67
JakeTheSnake
  • 2,456
  • 3
  • 14
  • 26

1 Answers1

2

In SVG you must terminate elements properly either with /> or a closing tag e.g. </polygon>

The html parser is parsing your current markup as nested polygons which is not allowed.

Your window's not in the right place but at least it's visible now.

<svg heght="100" width="100">
<!--bil-->  
<polygon points="0,100 0,70 5,65 20,65 30,40 70,40 80,65 95,65 100,70 100,100 90,100 80,90 70,100 30,100 20,90 10,100" style="fill:#777; stroke:#444; stroke-width:3px;"/>
  
<!--window-->  
<polygon points="30,30 50,30 50,50 30,50" style="fill:blue; stroke:#444; stroke-width:3px;"/>  

</svg>
Robert Longson
  • 118,664
  • 26
  • 252
  • 242