<svg width="200" height="200"> <rect x="50" y="50" width="100" height="100" fill="red" /> <rect x="75" y="75" width="100" height="100" fill="blue" style="z-index: -1" /> </svg>设置显示图层失效
时间: 2023-07-06 17:30:09 浏览: 142
svg图像入门教程1
是的,你说的对,SVG中的z-index属性不会影响元素的显示顺序,因为SVG元素是按照它们在DOM中的顺序进行绘制的,而不是根据它们的z-index值进行绘制的,这与HTML中的情况不同。
如果你想控制SVG元素的显示顺序,可以将它们分组到不同的<g>元素中,然后使用CSS或JavaScript来控制这些组的顺序。例如,下面的代码将两个矩形元素放置在不同的组中,并使用CSS将它们在屏幕上的显示顺序反转:
```html
<svg width="200" height="200">
<g id="group1">
<rect x="50" y="50" width="100" height="100" fill="red" />
</g>
<g id="group2">
<rect x="75" y="75" width="100" height="100" fill="blue" />
</g>
</svg>
```
```css
#group1 {
z-index: 2;
}
#group2 {
z-index: 1;
}
```
这样,第二个组就会显示在第一个组的前面。
阅读全文