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。

 

—— 完 ——