SVGレンダリング順序およびz軸表示問題(zIndex)

SVGは厳密に定義された要素の順序に従ってレンダリングされており、これはHTMLとZ-inndex値によって階層を制御するのとは異なる.
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.apped(e.target)既に存在するオブジェクトに対しては、ラベルが移動した位置です.
 
オンラインプレゼンテーションのアドレス:https://codepen.io/anon/pen/WEdXXM
詳細:
SVGテキストを中央にまとめます.
SVGはマーカーを使って矢印を描く(一)
SVG Pathパス使用(一)