svg是嚴格按照定義元素的順序來渲染的，這個與html靠z-index值來控制分層不一樣。
在svg中，寫在前面的元素先被渲染，寫在後面的元素後被渲染。後渲染的元素會覆蓋前面的元素，雖然有時候受透明度影響，看起來不是被覆蓋的，但是svg確實是嚴格按照先後順序來渲染的。
注意：svg是以xml定義的，所以是大小寫敏感的，這點與html不一樣。
關於z軸顯示問題的解決方案：
注：動態移動對應的標籤在svg文件中的順序，在文件結尾處的顯示在z軸的上部。
html**
<svg
style
='border:1px
solid blue;'
>
<
rect
class
="item"
width
='100'
height
='100'
style
='z-index:1;'
/>
<
circle
class
="item"
cx='100'
cy='100'
r='50'
style
='fill:red;z-index:0;'
/>
svg>
js**：
var svg = document.getelementsbytagname('svg')[0];
var items = document.getelementsbyclassname('item')
for (var key in
items) ,
false
); }
}
更多：svg 文字居中整理
svg 使用marker畫箭頭（一）
svg path路徑使用（一）
UGUI渲染順序
1，當有多個canvas並且渲染模式都為overlay。這種情況下，渲染順序是由canvas元件下的sort order決定的，值越大的越後渲染。2，當有多個canvas並且渲染模式都為camera。這種情況下，渲染順序首先由rendener camera的depth值決定，值越大越後渲染。如果de...
SVG裁剪和平移的順序
svg 裡為元素新增 clip path 屬性即可做出裁剪效果，新增 transfrom 屬性可以平移 旋轉元素。根據需求不同，有兩種情況 先裁剪元素，再把裁剪後的圖形平移 先平移元素，再按區域裁剪圖形 在實際元素的位置新增clip path屬性，則是先裁剪。id myclip clip rule ...
react頁面渲染之前 react 渲染順序
工作中要對乙個 做再次更新,可能是渲染後更新或者部分元件渲染之後,對頁面效果做處理 之前對react的理解,僅僅停留在render渲染.這次好好理解了下react的生命週期 1 react元件有三種狀態 mounted 已插入真實的dom updating 正在被渲染 和 unmounted已移除真...