raphaeljs画 svg 图层级问题
来源:互联网 发布:pc软件下载吧 编辑:程序博客网 时间:2024/05/22 03:52
使用raphaeljs 画 svg 图形时,后画的图像会在先画的图像上面,如下图:
var oWrap = document.getElementById("test");
var oPaper = new Raphael(oWrap ,"100%","100%"); //画布
// 规则的矩形
var oRect = oPaper.rect(10, 10, 50, 50);
oRect .attr({ "fill" : "red" });
// 带圆角的矩形
var oCircle = oPaper.rect(40, 40, 50, 50, 10);
oCircle.attr({ "fill" : "blue" })
有时需要调节图形的层级,在raphaeljs文档中并没有找到像css 中z-index一样可以调节层级的属性或方法,不过发现一个方法,
在一定层度上可以解决此问题:
toFront() : 将元素向上移动。
调用方式:Element.toFront() ;
// 规则的矩形
var oWrap = document.getElementById("test");
var oPaper = new Raphael( oWrap ,"100%","100%"); //画布
var oRect = oPaper.rect(10, 10, 50, 50);
oRect .attr({"stroke":"#A51337","fill":"red"})
// 带圆角的矩形
var oCircle = oPaper.rect(40, 40, 50, 50, 10);
oCircle.attr({"stroke":"#A51337","fill":"blue"})
a.toFront();//注意调用需在圆形绘制之后
var oWrap = document.getElementById("test");
var oPaper = new Raphael( oWrap ,"100%","100%"); //画布
var oRect = oPaper.rect(10, 10, 50, 50);
oRect .attr({"stroke":"#A51337","fill":"red"})
// 带圆角的矩形
var oCircle = oPaper.rect(40, 40, 50, 50, 10);
oCircle.attr({"stroke":"#A51337","fill":"blue"})
a.toFront();//注意调用需在圆形绘制之后
0 0
- raphaeljs画 svg 图层级问题
- Raphaeljs 插件实现任意SVG节点加载
- RaphaelJS
- [HTML5-SVG]使用raphaeljs:代替css3绘制opera图标效果
- [HTML5-SVG]使用svg、CSS3、raphaeljs:模拟月球绕地球,地球绕太阳旋转
- [HTML5-SVG]使用raphaeljs:代替css3实现qq空间关闭按钮旋转特效
- [HTML5-SVG]使用raphaeljs:绘制哆啦A梦并实现动画效果
- svg 画轨迹图
- 分布式存储系统,问题层级
- position层级问题
- css中的层级问题
- 微信小程序层级问题
- 如何调整svg中元素的层级关系
- ngui 和粒子层级问题
- 关于z-index层级问题
- SVG问题精华
- svg显示图片问题
- Android 层级关系图
- Pseudoprime numbers
- 软件快速计算平方根与平方根的倒数
- HDU 5094 Maze(迷宫搜索)
- CSS垂直翻转/水平翻转提高web页面资源重用性
- 第十二周项目-阅读程序4
- raphaeljs画 svg 图层级问题
- SWT/Jface Final evaluation of JFace project on Google Summer of Code 2014
- 补码表示法
- jQuery在线选座订座(影院篇)
- POJ 3750 小孩报数问题
- 第十二周项目-阅读与程序5
- lea edx,[esp+8]图解 供自己理解
- USACO:2.1.2 Ordered Fractions 顺序的分数
- 使用SWFUpload上传文件