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) {
if (items.hasOwnProperty(key)) {
var element = items[key];
element.addEventListener('mouseenter', function (e) {
svg.appendChild(e.target);
}, false);
}
}
注：svg.appendChild(e.target); 对于已经存在的对象，则是移动了标签的位置。
在线演示地址：https://codepen.io/anon/pen/WEdXXM
更多：