Avec JavaScript, puis-je changer l'index / la couche Z d'un élément SVG <g>?

Disons que j'ai quelques formes composites ( <g>). Je veux pouvoir les cliquer et les faire glisser, mais je veux que celui que je traîne en ce moment soit au-dessus de l'autre dans l'ordre Z, de sorte que si je le fais glisser sur l'AUTRE, l'autre on devrait être éclipsé.

L'index Z en SVG est défini par l'ordre d'apparition des éléments dans le document. Vous devrez changer l'ordre des éléments si vous souhaitez amener une forme spécifique vers le haut.

Une alternative au déplacement d'éléments dans l'arborescence consiste à utiliser des <use>éléments dans lesquels vous modifiez l' xlink:hrefattribut afin qu'il vous donne l'ordre z souhaité.

Voici un ancien fil de discussion sur la liste de diffusion svg-développeurs traitant de ce sujet dans le contexte de la volonté d'animer certaines formes.

Mise à jour:

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

Dans cet exemple, l'élément <use> est le dernier, ce qui en fait l'élément le plus en avant. Nous pouvons choisir n'importe lequel des autres éléments pour agir en premier en changeant simplement l' xlink:hrefattribut. Dans l'exemple ci-dessus, nous avons choisi le cercle avec id="c1", ce qui le fait apparaître comme l'élément le plus haut.

Voir violon .

C'est une vieille question, mais ...

Sur FireFox (7+) et Chrome (14+), vous pouvez tirer svg_element vers le haut. Cela ne vous donne pas la liberté de contrôler entièrement l'axe z, mais c'est mieux que rien;)

Ajoutez simplement cet élément à nouveau.

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

Je pensais que ça allait jeter une erreur ou quelque chose comme ça.

appendChild == se remplacer == redessiner

Une autre solution non mentionnée est de mettre chaque élément svg / ensemble d'éléments dans un div. Vous pouvez facilement modifier le z-index des divs.

Fiddle: cycles d'éléments SVG avec z-index pour les conteneurs

... Appuyez sur les boutons pour «pousser» cet élément vers l'avant. (vs repeindre l'ensemble et pousser 1 élément vers l'avant, mais en gardant l'ordre d'origine comme dans la solution acceptée)

Ce serait très bien d'avoir des indices z relatifs ...

stackOverflow veut que je mette le code si c'est un lien de 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>

Oui, l'ordre est ce qui spécifie quel objet sera devant l'autre. Pour manipuler l'ordre, vous devrez déplacer des éléments dans le DOM. Il y a un bon exemple de cela sur le wiki SVG à https://www.w3.org/TR/SVG11/render.html#RenderingOrder

Si vous utilisez la bibliothèque svg.js , vous pouvez utiliser la commande ".front ()" pour déplacer n'importe quel élément vers le haut.

SVGutilise un «modèle de peintre» de rendu. La peinture est appliquée dans des opérations successives sur le périphérique de sortie de sorte que chaque opération peint sur une certaine zone du périphérique de sortie. Lorsque la zone chevauche une zone déjà peint la nouvelle peinture obscurcit partiellement ou complètement le old.- lien vers cette

En SVG, pour obtenir un index Z plus élevé, vous devez déplacer l'élément vers le bas dans l'arborescence DOM. Vous pouvez le faire avec jQuery, en sélectionnant l'élément SVG, en le supprimant et en l'ajoutant à nouveau à la position souhaitée:

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

Le commentaire d'Adam Bradley à la réponse de Sam était exactement pertinent. Il utilise jQuery plutôt que CSS uniquement, mais il a dit ceci:

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

Cependant, pour ce que je créais, j'avais besoin que mon chemin SVG soit au-dessus de tout autre chemin en survol, mais toujours en dessous de mon texte SVG. Alors, voici ce que j'ai trouvé:

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

AppendTo et insertBefore déplaceront votre élément vers un nouvel emplacement vous permettant de modifier la profondeur de l'élément SVG à volonté.