Kann ich mit JavaScript den Z-Index/Layer einer SVG ändern Element?

Nehmen wir an, ich habe ein paar zusammengesetzte Formen (<g>). Ich möchte in der Lage sein, sie anzuklicken und zu ziehen, aber ich möchte, dass die, die ich gerade ziehe, in der Z-Reihenfolge über der anderen liegt, sodass, wenn ich sie über die ANDERE ziehe, die andere man sollte verdunkelt werden.

Der Z-Index in SVG wird durch die Reihenfolge definiert, in der die Elemente im Dokument erscheinen. Sie müssen die Elementreihenfolge ändern, wenn Sie eine bestimmte Form nach oben bringen möchten.

Eine Alternative zum Verschieben von Elementen im Baum ist die Verwendung <use> Elemente, wo Sie die ändern xlink:href -Attribut, sodass Sie die gewünschte z-Reihenfolge erhalten.

Hier ist ein alter Faden auf der Mailingliste von svg-developers, in der dieses Thema im Zusammenhang mit dem Wunsch, einige Formen zu animieren, diskutiert wird.

Aktualisieren:

<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>

In diesem Beispiel ist das -Element das letzte und damit das vorderste Element. Wir können jedes der anderen Elemente als vorderste auswählen, indem wir einfach ändern xlink:href Attribut. Im obigen Beispiel haben wir den Kreis mit ausgewählt id="c1", wodurch es als oberstes Element angezeigt wird.

Sehen Geige.

Das ist eine alte Frage, aber…

Auf FireFox (7+) und Chrome (14+) können Sie svg_element nach oben ziehen. Dies gibt Ihnen nicht die volle Kontrolle über die Z-Achse, aber es ist besser als nichts;)

Fügen Sie dieses Element einfach erneut an.

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

Ich dachte, es würde einen Fehler oder so etwas auslösen.

appendChild == sich selbst ersetzen == neu zeichnen

Eine andere nicht erwähnte Lösung besteht darin, jedes SVG-Element / jeden Satz von Elementen in ein div zu stecken. Sie können den Z-Index der Divs einfach ändern.

Fiddle: SVG-Elementzyklen mit Z-Index für Container

…Drücken Sie auf die Knöpfe, um dieses Element nach vorne zu ‘schieben’. (im Gegensatz dazu das gesamte Set neu zu streichen und 1 Element nach vorne zu schieben, aber die ursprüngliche Reihenfolge wie in der akzeptierten Lösung beizubehalten)

Es wäre sehr schön, relative Z-Indizes zu haben …

stackOverflow möchte, dass ich den Code einfüge, wenn es sich um einen Link von jsfiddle handelt? … 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>

Ja, die Reihenfolge gibt an, welches Objekt vor dem anderen sein wird. Um die Reihenfolge zu manipulieren, müssen Sie Dinge im DOM verschieben. Es gibt ein gutes Beispiel dafür im SVG-Wiki unter https://www.w3.org/TR/SVG11/render.html#RenderingOrder

Wenn Sie die verwenden svg.js-Bibliothek, können Sie den Befehl “.front()” verwenden, um ein beliebiges Element nach oben zu verschieben.

Adam Bradleys Kommentar zu Sams Antwort war genau richtig. Es verwendet nur jQuery anstelle von CSS, aber er sagte Folgendes:

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

Für das, was ich erstellte, musste mein SVG-Pfad jedoch beim Schweben über jedem anderen Pfad liegen, aber immer noch unter meinem SVG-Text. Also hier ist, was ich mir ausgedacht habe:

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

Sowohl appendTo als auch insertBefore verschieben Ihr Element an eine neue Position, sodass Sie die Tiefe des SVG-Elements nach Belieben ändern können.