svg

1、svg属于xml语言，所以<svg></svg>或者<svg     />

2、 No layer!

There are no “layers” in SVG, and no real concept of depth. SVG does not support CSS’s z-index property, so shapes can only be arranged within the two-dimensional x/y plane.

And yet, if we draw multiple shapes, they overlap:

<rect x="0" y="0" width="30" height="30" fill="purple"/><rect x="20" y="5" width="30" height="30" fill="blue"/><rect x="40" y="10" width="30" height="30" fill="green"/><rect x="60" y="15" width="30" height="30" fill="yellow"/><rect x="80" y="20" width="30" height="30" fill="red"/>

The order in which elements are coded determines their depth order. The purple square appears first in the code, so it is rendered first. Then, the blue square is rendered “on top” of the purple one, then the green square on top of that, and so on.
Think of SVG shapes as being rendered like paint on a canvas. The pixel-paint that is applied later obscures any earlier paint, and thus appears to be “in front.”
简单地说svg没法设定显示优先级，所以一定要把最重要的代码，写在最后面，以防止被覆盖1