JavaScriptを使用して、SVG <g>要素のZインデックス/レイヤーを変更できますか？

いくつかの複合形状があるとしましょう（<g>）。クリックしてドラッグできるようにしたいのですが、たまたまドラッグしているものをZオーダーでもう一方の上に置き、もう一方の上にドラッグすると、もう一方の上にドラッグしたいのです。 1つは日食する必要があります。

SVGのZインデックスは、要素がドキュメントに表示される順序によって定義されます。特定の形状を上に表示する場合は、要素の順序を変更する必要があります。

ツリー内で要素を移動する代わりに<use>、xlink:href属性を変更する要素を使用して、必要なz順序を指定することもできます。

ここだ古いスレッド一部の図形をアニメーション化したいのコンテキストでこの話題を議論するメーリングリストSVG-開発者には。

更新：

<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"
     style="width:100%; height: 100%">
    <circle id="c1" cx="50" cy="50" r="40" fill="lime" />
    <rect id="r1" x="4" y="20" width="200" height="50" fill="cyan" />
    <circle id="c2" cx="70" cy="70" r="50" fill="fuchsia" />
    <use id="use" xlink:href="#c1" />
</svg>

この例では、<use>要素が最後の要素であり、これが最前面の要素になります。xlink:href属性を変更するだけで、他の要素を選択して最前面として機能させることができます。上記の例では、で円を選択しましたid="c1"。これにより、最上位の要素として表示されます。

フィドルを参照してください。

これは古い質問ですが...

FireFox（7+）およびChrome（14+）では、svg_elementを一番上にプルできます。これは完全なz軸制御の自由を与えませんが、何もないよりはましです;）

その要素をもう一度追加するだけです。

var svg = doc.createElemNS('svg');
var circle = doc.createElemNS('circle');
var line = doc.createElemNS('line');

svg.appendChild(circle); // appends it
svg.appendChild(line);   // appends it over circle
svg.appendChild(circle); // redraws it over line now

エラーか何かを投げるだろうと思った。

appendChild ==自分自身を置き換える==再描画

言及されていない別の解決策は、各svgアイテム/アイテムのセットをdivに入れることです。divのz-indexを簡単に変更できます。

フィドル：SVG要素はコンテナのz-indexで循環します

...ボタンを押して、その要素を前面に「押し」ます。（vsセット全体を塗り直し、1つの要素を前面に押しますが、受け入れられたソリューションのように元の順序を維持します）

相対的なzインデックスがあると非常に便利です...

stackOverflowは、jsfiddleからのリンクの場合、コードを配置するように求めていますか？... ook

var orderArray=[0,1,2];
var divArray = document.querySelectorAll('.shape');
var buttonArray = document.querySelectorAll('.button');

for(var i=0;i<buttonArray.length;i++){
    buttonArray[i].onclick=function(){
        var localI = i;
        return function(){clickHandler(orderArray.indexOf(localI));};
    }();
}


function clickHandler(divIndex) {
     orderArray.push(orderArray.splice(divIndex, 1)[0]);
    orderDivs();
}

function orderDivs(){
    for(var i=0;i<orderArray.length;i++){
       divArray[orderArray[i]].style.zIndex=i;        
    }
}

svg {
    width: 100%;
    height: 100%;
    stroke: black;
    stroke-width:2px;
    pointer-events: all;
}
div{
    position:absolute;
}
div.button{
    top:55%;
    height:5%;
    width:15%;
    border-style: outset;
    cursor:pointer;
    text-align: center;
    background:rgb(175, 175, 234);
    
}
div.button:hover{
    border-style: inset;
    background:yellow;
    
}
div.button.first{
    left:0%;
}
div.button.second{
    left:20%;
}
div.button.third{
    left:40%;
}

<div class="shape">
    <svg>
    <circle cx="50" cy="50" r="40" fill="lime" />
    </svg>
</div>
<div class="shape">
    <svg>
        <rect x="4" y="20" width="200" height="50" fill="cyan" />
    </svg>
</div>
<div class="shape">
    <svg>
        <circle cx="70" cy="70" r="50" fill="fuchsia" />
    </svg>
</div>

<div class='button first'>lime</div>
<div class='button second'>cyan</div>
<div class='button third'>fuchsia</div>

はい、順序は、どのオブジェクトが他のオブジェクトの前にあるかを指定するものです。順序を操作するには、DOMに関するものを移動する必要があります。https://www.w3.org/TR/SVG11/render.html#RenderingOrderのSVGwikiにこの良い例があります。

svg.jsライブラリを使用する場合は、「。front（）」コマンドを使用して任意の要素を一番上に移動できます。

SVGレンダリングの「ペインターモデル」を使用します。ペイントは、各操作が出力デバイスの特定の領域にペイントされるように、連続する操作で出力デバイスに適用されます。その領域が以前にペイントされた領域と重なると、新しいペイントが古いペイントを部分的または完全に覆い隠します。-これへのリンク

SVGでは、より大きなZインデックスを取得するには、要素をDOMツリーで下に移動する必要があります。これは、jQueryを使用して行うことができ、SVG要素を選択して削除し、目的の位置に再度追加します。

$('g.element').remove().appendTo('svg');

サムの答えに対するアダム・ブラッドレイのコメントは正確に正しいものでした。CSSだけではなくjQueryを使用していますが、彼は次のように述べています。

$('#thing-i-want-on-top').appendTo('#my-svg');

ただし、私が作成していたものについては、ホバー時にSVGパスが他のパスの上にある必要がありましたが、それでもSVGテキストの下にあります。だからこれが私が思いついたものです：

$('#thing-i-want-on-top').insertBefore('#id-for-svg-text');

appendToとinsertBeforeの両方が要素を新しい場所に移動し、SVG要素の深さを自由に変更できるようにします。