天天看点

html z-index置顶,从七巧板看SVG 层次 置顶问题 (z-index无效解决方案)

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();

})