svg与H5标准不完全兼容,许多css属性并不适用与svg,包括 z-index;
svg中的元素只会按照生成顺序层叠。所以,修改svg中元素层叠关系只能重写svg的innerHTML了。
思路
目标:将选中的元素置顶。
实现:先移除此节点,再重新添加此节点。
$("#p").append($(this).detach());
detach() 方法移除被选元素,包括所有文本和子节点。这个方法会保留 jQuery 对象中的匹配的元素,因而可以在将来再使用这些匹配的元素。detach() 会保留所有绑定的事件、附加的数据,这一点与 remove() 不同。
【具体实例:svg七巧板】
Tangram
body {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
}
.tangram{
stroke:#000000;
stroke-width:1;
transform-origin:50% 50%;
}
顺时针1°
顺时针10°
逆时针10°
逆时针1°
请在移动设备上玩耍,单指移动,长按0.5s呼出旋转菜单,不允许放大。
var fx=new Object();
var fy=new Object();
var nx=new Object();
var ny=new Object();
var tx=new Object();
var ty=new Object();
var r=new Object();
var curObj=null;
var timeOutEvent=0;
for (var i=1;i<=7;i++){
tx[i]=0;
ty[i]=0;
r[i]=0;
}
$(".tangram").on("touchstart",function (e) {
e.preventDefault();
$("#p").append($(this).detach());
var index=$(this).attr("index");
fx[index] = e.targetTouches[0].pageX;
fy[index] = e.targetTouches[0].pageY;
$(this).css("border", " solid 2px lightgreen");
curObj = this;
timeOutEvent = setTimeout("longPress()",500);
}).on("touchmove",function (e) {
e.preventDefault();
var index=$(this).attr("index");
nx[index] = e.targetTouches[0].pageX;
ny[index] = e.targetTouches[0].pageY;
tx[index] += nx[index] - fx[index];
ty[index] += ny[index]-fy[index];
$(this).css("transform","translateX("+tx[index]+"px) translateY("+ty[index]+"px) rotate("+r[index]+"deg)");
fx[index] = nx[index];
fy[index] = ny[index];
clearTimeout(timeOutEvent);
timeOutEvent = 0;
}).on("touchend", function (e) {
clearTimeout(timeOutEvent);
});
function longPress(){
timeOutEvent = 0;
index=$(curObj).attr("index");
$("#rotate").css("left",fx[index]).css("top",fy[index]);
$("#rotate").show();
}
function rotateObj(dir) {
index=$(curObj).attr("index");
r[index]+=dir;
$(curObj).css("transform","translateX("+tx[index]+"px) translateY("+ty[index]+"px) rotate("+r[index]+"deg)");
}
$("#p").on("touchstart",function () {
$("#rotate").hide();
})
$("body").on("dblclick",function(e){
e.preventDefault();
})