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

Posted 天马3798

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了SVG渲染顺序及z轴显示问题(zIndex)相关的知识,希望对你有一定的参考价值。

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路径使用(一)

以上是关于SVG渲染顺序及z轴显示问题(zIndex)的主要内容,如果未能解决你的问题,请参考以下文章

如何在three.js对象渲染中从中心向左更改轴(x,y,z)位置?

vconsole插件network面板在ios上面不显示请求

z-index在IE中的坑

请问z-index应用广泛么

Mac - NSView不能保证subview的z轴顺序

使用 D3 更新 SVG 元素 Z-Index