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)的更多相关文章

  1. OpenGL编程(七)3D模型的深度(z轴)检测

    下图是我们要修改后的效果图: 一.深度检测 1.模型Z轴显示有问题: 上一次试验中,如果认真留意,会发现一个问题.当控制锥体在左右或上下旋转时,你会发现锥体看起来是在+-180度之间来回摆动,而不是3 ...

  2. (转)NGUI中深度depth和z轴关系

    先列出转载链接: http://game.ceeger.com/forum/read.php?tid=8917 转载原文: 问题源自一个帖子,因为上传的图比较多,就另开了这个贴写下自己的试验结果,原帖 ...

  3. 【Unity笔记】UGUI物体的渲染顺序

    ①不同Camera的Depth.(大在前,小在后)②同Camera的SortingLayer.(下在前,上在后)③同SortingLayer下的Order in Layer.(大在前,小在后)④同Or ...

  4. KING_Unity学习之UGUI_Canvas渲染顺序以及层次关系总结

    http://blog.csdn.net/kingsea168/article/details/50252733 之前一直用NGUI开发界面,但看到现在的unity的新版本的UGUI也不错,这几天专门 ...

  5. atlas z 轴

    问题源自一个帖子,因为上传的图比较多,就另开了这个贴写下自己的试验结果,原帖在下面链接中 http://game.ceeger.com/forum/read.php?tid=8911#info NGU ...

  6. U3D中物体的渲染顺序

    1,由SHADER中渲染队列及队列中的值决定 2,在同一队列中,若材质相同 2.1 对于UI,按其在场景层级中的先后顺序绘制 2.2 对于3D不透明物体,按其离相机的距离,由近到远绘制,这样可以减少像 ...

  7. SKNode的渲染顺序

    [SKNode的渲染顺序] SKNode的zPosition属性,指定相对于其父视图的z轴坐标. The default value is 0.0. The positive z axis is pr ...

  8. transform:translateZ() 字体模糊问题 父类重返Z轴平面

    translateZ()变糊 第一种情况: 当translateZ(m)中的 m设置为 非整数,1.5px 之类的,字体会模糊,但是不明显;和浏览器渲染,字体格式,或者操作系统有关, 这个 css中 ...

  9. 传感器(3)传感器的X,Y,Z轴

    设备正面水平向上. X轴 : 左右方向,向右是正值. Y轴 : 远近方向,远离你是负. Z轴 : 上下方向,向上是正值.

随机推荐

  1. 【Java】 大话数据结构(11) 查找算法(2)(二叉排序树/二叉搜索树)

    本文根据<大话数据结构>一书,实现了Java版的二叉排序树/二叉搜索树. 二叉排序树介绍 在上篇博客中,顺序表的插入和删除效率还可以,但查找效率很低:而有序线性表中,可以使用折半.插值.斐 ...

  2. jmeter内存溢出处理方式记录

    方法一: 使用jmeter进行压力测试时 遇到一段时间后报内存溢出outfmenmory错误,导致jmeter卡死了,先尝试在jmeter.bat中增加了JVM_ARGS="- Xmx204 ...

  3. C#并行编程(5):需要知道的异步

    异步与并行的联系 大家知道"并行"是利用CPU的多个核心或者多个CPU同时执行不同的任务,我们不关心这些任务之间的依赖关系. 但是在我们实际的业务中,很多任务之间是相互影响的,比如 ...

  4. jvm在什么情况下会执行GC

    jvm在什么情况下会执行GC?[五种情况] 对象没有引用 作用域发生未捕获异常 程序在作用域正常执行完毕 程序执行了System.exit() 程序发生意外终止(被杀进程等) 什么是没有对象引用?

  5. Android-Service和Thread

    Android-Service和Thread 学习自 郭霖的博客 服务是运行在主线程上的 可能在我们第一次接触到Service的时候都是对于 __服务是运行在主线程上的 __这一现象不太理解,但是事实 ...

  6. C语言结构体及typedef关键字定义结构体别名和函数指针的应用

    结构体(struct)的初始化 struct autonlist { char *symbol; struct nlist nl[2]; struct autonlist *left, *right; ...

  7. java集合之vector容器

    学完ArrayList和LinkedList之后,我们接着学习Vector.第1部分 Vector介绍第2部分 Vector数据结构第3部分 Vector源码解析(基于JDK1.6.0_45)第4部分 ...

  8. 【转载】GetDeviceCaps()函数相关说明

    CDC::GetDeviceCaps()物理长度与屏幕像素间的转换 作用:读取DC的一些打印区域信息,主要是像素和英寸方面的数据. 声明:GetDeviceCaps(int ) 使用例子://所有像素 ...

  9. Intel Code Challenge Elimination Round (Div.1 + Div.2, combined) B. Verse Pattern 水题

    B. Verse Pattern 题目连接: http://codeforces.com/contest/722/problem/B Description You are given a text ...

  10. UVALive 6908 Electric Bike dp

    Electric Bike 题目连接: https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8 ...