svg与H5标准不完全兼容，许多css属性并不适用与svg，包括 z-index；
svg中的元素只会按照生成顺序层叠。所以，修改svg中元素层叠关系只能重写svg的innerHTML了。
思路
目标：将选中的元素置顶。
实现：先移除此节点，再重新添加此节点。
$("#p").append($(this).detach());
detach() 方法移除被选元素，包括所有文本和子节点。这个方法会保留 jQuery 对象中的匹配的元素，因而可以在将来再使用这些匹配的元素。detach() 会保留所有绑定的事件、附加的数据，这一点与 remove() 不同。
【具体实例: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)">顺时针1°</button>
<button ontouchstart="rotateObj(10)">顺时针10°</button>
<button ontouchstart="rotateObj(-10)">逆时针10°</button>
<button ontouchstart="rotateObj(-1)">逆时针1°</button>
</div>
<div style="position: fixed;bottom: 0px;">
请在移动设备上玩耍，单指移动，长按0.5s呼出旋转菜单，不允许放大。<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>
