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