SVG渲染顺序及z轴显示问题(zIndex)

本文介绍了SVG元素的渲染顺序及如何通过JavaScript动态调整元素顺序实现z轴显示控制。SVG与HTML不同,它遵循严格的先后渲染规则。文章还提供了一个交互示例,展示了如何在鼠标悬停时将元素移动到顶层。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

SVG是严格按照定义元素的顺序来渲染的,这个与HTML靠z-index值来控制分层不一样。

在SVG中,写在前面的元素先被渲染,写在后面的元素后被渲染。后渲染的元素会覆盖前面的元素,虽然有时候受透明度影响,看起来不是被覆盖的,但是SVG确实是严格按照先后顺序来渲染的。

注意:SVG是以XML定义的,所以是大小写敏感的,这点与HTML不一样。

关于z轴显示问题的解决方案:

注:动态移动对应的标签在SVG文档中的顺序,在文档结尾处的显示在z轴的上部。

Html代码

<svg style='border:1px solid blue;'>
    <rect class="item" width='100' height='100' style='z-index:1;' />
    <circle class="item" cx='100' cy='100' r='50' style='fill:red;z-index:0;' />
</svg>

js代码:

var svg = document.getElementsByTagName('svg')[0];
var items = document.getElementsByClassName('item')
for (var key in items) {
    if (items.hasOwnProperty(key)) {
        var element = items[key];

        element.addEventListener('mouseenter', function (e) {
            svg.appendChild(e.target);
        }, false);
    }
}

注:svg.appendChild(e.target); 对于已经存在的对象,则是移动了标签的位置。

 

在线演示地址:https://codepen.io/anon/pen/WEdXXM

更多:

SVG 文字居中整理

SVG 使用marker画箭头(一)

SVG Path路径使用(一)

转载于:https://www.cnblogs.com/tianma3798/p/7383486.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值