svg分图层显示图像

1、问题

给定的数组里包含位置相同但图层（layer，至关于z-index）不一样的元素，可是本该位于下层的元素遮住了上层的元素，致使部分元素没法正常显示。

2、缘由

svg规定：先添加至节点树的元素位于z-index底层，后添加的元素位于上层。然而给定的数组里图层元素排列混乱。

3、解决

将数组按图层顺序有小到大排序：

// iteration function, make array listed from layer low to high
for(var m = 0; m < arr.length - 1; m++) { for (var n = 0; n < arr.length - m - 1; n ++) { if (arr[n].layer > arr[n + 1].layer ) { swapArr(arr, n, n + 1); } } } // swap elements in arr
function swapArr(arr, i1, i2) { arr[i1] = arr.splice(i2, 1, arr[i1])[0]; return arr; }

4、效果

svg终于正常显示...orz。

 

—— 完 ——