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渲染顺序及z轴显示问题(zIndex)的更多相关文章
- OpenGL编程(七)3D模型的深度(z轴)检测
下图是我们要修改后的效果图: 一.深度检测 1.模型Z轴显示有问题: 上一次试验中,如果认真留意,会发现一个问题.当控制锥体在左右或上下旋转时,你会发现锥体看起来是在+-180度之间来回摆动,而不是3 ...
- (转)NGUI中深度depth和z轴关系
先列出转载链接: http://game.ceeger.com/forum/read.php?tid=8917 转载原文: 问题源自一个帖子,因为上传的图比较多,就另开了这个贴写下自己的试验结果,原帖 ...
- 【Unity笔记】UGUI物体的渲染顺序
①不同Camera的Depth.(大在前,小在后)②同Camera的SortingLayer.(下在前,上在后)③同SortingLayer下的Order in Layer.(大在前,小在后)④同Or ...
- KING_Unity学习之UGUI_Canvas渲染顺序以及层次关系总结
http://blog.csdn.net/kingsea168/article/details/50252733 之前一直用NGUI开发界面,但看到现在的unity的新版本的UGUI也不错,这几天专门 ...
- atlas z 轴
问题源自一个帖子,因为上传的图比较多,就另开了这个贴写下自己的试验结果,原帖在下面链接中 http://game.ceeger.com/forum/read.php?tid=8911#info NGU ...
- U3D中物体的渲染顺序
1,由SHADER中渲染队列及队列中的值决定 2,在同一队列中,若材质相同 2.1 对于UI,按其在场景层级中的先后顺序绘制 2.2 对于3D不透明物体,按其离相机的距离,由近到远绘制,这样可以减少像 ...
- SKNode的渲染顺序
[SKNode的渲染顺序] SKNode的zPosition属性,指定相对于其父视图的z轴坐标. The default value is 0.0. The positive z axis is pr ...
- transform:translateZ() 字体模糊问题 父类重返Z轴平面
translateZ()变糊 第一种情况: 当translateZ(m)中的 m设置为 非整数,1.5px 之类的,字体会模糊,但是不明显;和浏览器渲染,字体格式,或者操作系统有关, 这个 css中 ...
- 传感器(3)传感器的X,Y,Z轴
设备正面水平向上. X轴 : 左右方向,向右是正值. Y轴 : 远近方向,远离你是负. Z轴 : 上下方向,向上是正值.
随机推荐
- Codeforces Round #475 (Div. 2) C - Alternating Sum
等比数列求和一定要分类讨论!!!!!!!!!!!! #include<bits/stdc++.h> #define LL long long #define fi first #defin ...
- sonarQube代码管理工具
第一步:安装环境:jdk 1.8 idea mysql5.6以上 sonarqube5.6.6 第二歩:下载好sonarqube后,解压打开bin目录,启动相应OS目录下的StartSonar ...
- 报错:-bash: locate: command not found
-bash: locate: command not found 查看某些文件在哪些地方,需要用到 locate 命令 但是在安装 yum install locate 会报以下错误: -bash: ...
- MIT-6.828-JOS-lab5:File system, Spawn and Shell
Lab 5: File system, Spawn and Shell tags: mit-6.828 os 概述 本lab将实现JOS的文件系统,只要包括如下四部分: 引入一个文件系统进程(FS进程 ...
- 前端自动化grunt轻松入门
如果你还不了解grunt,或者只是听过它的名字而没有去研究过它,那么这篇入门级的文章就是为你写的,相信看完你就会爱上grunt! grunt是什么? grunt是一个非常好的自动化工具,你只管code ...
- .NET工作准备--02基础知识
(已过时) 框架基础,语法基础,字符串&集合&流,常见类和接口; 02.net基础(重点) -第一部分 框架基础 1.基础概念 CTS(Common Type System),CLS( ...
- JAVAEE——SpringBoot日志篇:日志框架SLF4j、日志配置、日志使用、切换日志框架
Spring Boot 日志篇 1.日志框架(故事引入) 小张:开发一个大型系统: 1.System.out.println(""):将关键数据打印在控制台:去掉?写在一个文件 ...
- ubuntu VNC中Xfce4中Tab键失效的解决方法
转:https://blog.csdn.net/xuezhisdc/article/details/48662435 说明 在Ubuntu Server 14.04上安装了xfce4桌面环境,但是却发 ...
- 16、Redis手动创建集群
写在前面的话:读书破万卷,编码如有神 --------------------------------------------------------------------------------- ...
- 通过本地Git部署网站到WebSite
玩过Azure WebSite(WebApp)的同学应该知道部署网站的方式非常多,今天我要讲的是如果通过本地Git部署网站到WebSite. 1.新建WebSite 创建WebSite非常简单,我这里 ...