多层 <svg> 多边形 - 不工作答案

【问题标题】：Multiple Layers Of <svg> polygons - Not Working多层 <svg> 多边形 - 不工作
【发布时间】：2015-11-29 15:06:18
【问题描述】：

如何在同一个 SVG 中添加多层 SVG 多边形？例如，我这里有一张汽车的图纸（参见 sn-p），如果我想在上面添加一个窗口怎么办？如果我在汽车标记下方写下新窗口标记（请参阅 sn-p），它是不可见的。如果我把它写在上面，汽车标记就会被覆盖。

<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>

【问题讨论】：

标签： html svg polygon layer

【解决方案1】：

在 SVG 中，您必须使用 /> 或结束标签正确终止元素，例如</polygon>

html 解析器将您当前的标记解析为嵌套多边形，这是不允许的。

你的窗口不在正确的位置，但至少它现在是可见的。

<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>

【讨论】：

太棒了！非常感谢！