Toc
  1. 一、问题
  2. 二、原因
  3. 三、解决
  4. 四、效果
Toc
0 results found
bbcfive
svg分图层显示图像
2019/07/30 前端 JavaScript svg

一、问题

给定的数组里包含位置相同但图层(layer,相当于z-index)不同的元素,但是本该位于下层的元素遮住了上层的元素,导致部分元素无法正常显示。

二、原因

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

三、解决

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// iteration function, make array listed by layer from 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;
}

四、效果

avatar

svg终于正常显示…orz。

本文作者:bbcfive
版权声明:本文首发于bbcfive的博客,转载请注明出处!