svg與H5標(biāo)準(zhǔn)不完全兼容桑滩，許多css屬性并不適用與svg，包括 z-index幌氮；
svg中的元素只會(huì)按照生成順序?qū)盈B胁澳。所以，修改svg中元素層疊關(guān)系只能重寫svg的innerHTML了韭畸。
思路
目標(biāo)：將選中的元素置頂。
實(shí)現(xiàn)：先移除此節(jié)點(diǎn)胰丁，再重新添加此節(jié)點(diǎn)。
$("#p").append($(this).detach());
detach() 方法移除被選元素机蔗，包括所有文本和子節(jié)點(diǎn)。這個(gè)方法會(huì)保留 jQuery 對(duì)象中的匹配的元素萝嘁，因而可以在將來再使用這些匹配的元素。detach() 會(huì)保留所有綁定的事件酸钦、附加的數(shù)據(jù)咱枉，這一點(diǎn)與 remove() 不同。
【具體實(shí)例:svg七巧板】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tangram</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="js/jquery.min.js"></script>
<style>
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%;
}
</style>
</head>
<body oncontextmenu="return false;">
<svg id="p" style="position: fixed;top: 50%;left: 50%;width: 400px;height: 400px;transform: translateX(-50%) translateY(-50%);border: 2px solid #999;" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon index="1" class="tangram" points="100,100 300,100 200,200" style="fill:#caff67;" />
<polygon index="2" class="tangram" points="100,100 100,300 200,200" style="fill:#67becf;" />
<polygon index="3" class="tangram" points="250,150 200,200 250,250" style="fill:#f6ca29;" />
<polygon index="4" class="tangram" points="100,300 150,250 200,300" style="fill:#ef3d61;" />
<polygon index="5" class="tangram" points="300,200 200,300 300,300" style="fill:#f9f51a;" />
<polygon index="6" class="tangram" points="200,200 250,250 200,300 150,250" style="fill:#d1c1d1;" />
<polygon index="7" class="tangram" points="300,100 300,200 250,250 250,150" style="fill:#fa8ccc;" />
</svg>
<div id="rotate" style="display: none;position: fixed;background-color: #eeeeee">
<button ontouchstart="rotateObj(1)">順時(shí)針1°</button>
<button ontouchstart="rotateObj(10)">順時(shí)針10°</button>
<button ontouchstart="rotateObj(-10)">逆時(shí)針10°</button>
<button ontouchstart="rotateObj(-1)">逆時(shí)針1°</button>
</div>
<div style="position: fixed;bottom: 0px;">
請(qǐng)?jiān)谝苿?dòng)設(shè)備上玩耍，單指移動(dòng)基括，長(zhǎng)按0.5s呼出旋轉(zhuǎn)菜單财岔，不允許放大。<br>
</div>
<script>
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();
})
</script>
</body>
</html>
