Comment utiliser le z-index dans les éléments svg ?

Question

J'utilise les cercles svg dans mon projet comme ceci,

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 120">
    <g>
        <g id="one">
            <circle fill="green" cx="100" cy="105" r="20" />
        </g>
        <g id="two">
            <circle fill="orange" cx="100" cy="95" r="20" />
        </g>
    </g>
</svg>

Et j'utilise le z-index dans les g pour montrer les éléments en premier. Dans mon projet, j'ai besoin d'utiliser uniquement la valeur z-index, mais je ne peux pas utiliser le z-index pour mes éléments svg. J'ai beaucoup cherché sur Google mais je n'ai rien trouvé de relatif. Alors s'il vous plaît aidez-moi à utiliser z-index dans mon svg.

Voici le DEMO.

Answer 1

Utilisation de D3 :

Si vous voulez réinsérer chaque élément sélectionné, dans l'ordre, comme dernier enfant de son parent.

selection.raise()

Answer 2

Utilisation de D3 :

Si vous voulez ajouter l'élément dans l'ordre inverse aux données, utilisez :

.insert('g', ":first-child")

Au lieu de .append('g')

Ajout d'un élément au sommet d'un élément de groupe

Answer 3

Il s'agit du premier résultat de Google pour les recherches concernant l'indice z et les SVG. Après avoir lu toutes les réponses, dont certaines sont très bonnes, je suis resté perplexe.

Donc pour les bleus comme moi, voici le résumé actuel, 9 ans plus tard en 2022.

Vous ne pouvez pas utiliser le z-index avec les SVG.

Dans les SVG, l'indice z est défini par l'ordre d'apparition de l'élément dans le document.

Si vous voulez que quelque chose apparaisse en haut, ou plus près de l'utilisateur, dessinez-le en dernier ou insérez-le avant. Source :

SVG 2 pourrait supporter le z-index mais pourrait ne jamais sortir

SVG 2 est une proposition visant à mettre en œuvre cette fonctionnalité et d'autres, mais elle risque de ne jamais avancer.

SVG 2 a atteint le stade de recommandation candidate en 2016, puis a été révisé en 2018 et la dernière version a été publiée le 8 juin 2021. Source :

Cependant, il ne bénéficie pas d'un grand soutien et très peu de personnes y travaillent. Source : Alors ne retenez pas votre souffle en attendant ça.

Vous pourriez utiliser D3, mais vous ne devriez probablement pas le faire.

D3 une bibliothèque couramment utilisée pour visualiser des données prend en charge le z-index en liant votre z-index et en effectuant ensuite un tri, mais il s'agit d'une bibliothèque vaste et complexe qui n'est peut-être pas la meilleure solution si vous souhaitez simplement qu'un certain SVG apparaisse au sommet d'une pile.

Answer 4

Il n'y a pas de z-index pour les svgs. Mais le svg détermine lequel de vos éléments est le plus haut par sa position dans le DOM. Ainsi, vous pouvez retirer l'objet et le placer à la fin du svg, ce qui en fait le "dernier élément rendu". Celui-ci est alors rendu "le plus haut" visuellement.

---

Utilisation de jQuery :

function moveUp(thisObject){
    thisObject.appendTo(thisObject.parents('svg>g'));
}

l'usage :

moveUp($('#myTopElement'));

---

Utilisation de D3.js :

d3.selection.prototype.moveUp = function() {
    return this.each(function() {
        this.parentNode.appendChild(this);
    });
};

l'usage :

myTopElement.moveUp();

---

Answer 5

Les solutions propres, rapides et faciles affichées à la date de cette réponse ne sont pas satisfaisantes. Elles sont construites sur l'affirmation erronée que les documents SVG manquent d'ordre z. Les bibliothèques ne sont pas non plus nécessaires. Une ligne de code peut effectuer la plupart des opérations pour manipuler l'ordre z des objets ou des groupes d'objets qui pourraient être nécessaires dans le développement d'une application qui déplace des objets 2D dans un espace x-y-z.

L'ordre Z existe définitivement dans les fragments de documents SVG

Ce que l'on appelle un fragment de document SVG est un arbre d'éléments dérivés du type de nœud de base SVGElement. Le nœud racine d'un fragment de document SVG est un SVGSVGElement, qui correspond à un HTML5 <svg> étiquette. Le SVGGElement correspond à l'élément <g> et permet d'agréger les enfants.

Avoir un attribut z-index sur l'élément SVGE comme en CSS irait à l'encontre du modèle de rendu SVG. Les sections 3.3 et 3.4 de la Recommandation SVG v1.1 2nd Edition du W3C stipulent que les fragments de document SVG (arbres de descendants d'un SVGSVGElement) sont rendus en utilisant ce qu'on appelle un profondeur première recherche de l'arbre . Ce dispositif est un ordre z dans tous les sens du terme.

L'ordre Z est en fait un raccourci de la vision par ordinateur pour éviter la nécessité d'un véritable rendu 3D avec les complexités et les exigences informatiques du ray tracing. L'équation linéaire pour l'indice z implicite des éléments dans un fragment de document SVG.

z-index = z-index_of_svg_tag + depth_first_tree_index / tree_node_qty

C'est important car si vous souhaitez déplacer un cercle qui se trouvait sous un carré vers le haut, il vous suffit d'insérer le carré avant le cercle. Cela peut être fait facilement en JavaScript.

Méthodes de soutien

Les instances de SVGElement ont deux méthodes qui permettent de manipuler l'ordre z de manière simple et facile.

• parent.removeChild(child)
• parent.insertBefore(child, childRef)

La bonne réponse qui ne crée pas de désordre

Parce que l'élément SVGGElement ( <g> ) peuvent être retirées et insérées aussi facilement qu'un SVGCircleElement ou toute autre forme, les couches d'images typiques des produits Adobe et d'autres outils graphiques peuvent être implémentées avec facilité en utilisant le SVGGElement. Ce JavaScript est essentiellement un Move Below commandement.

parent.insertBefore(parent.removeChild(gRobot), gDoorway)

Si le calque d'un robot dessiné en tant qu'enfant de SVGGElement gRobot était avant la porte dessinée en tant qu'enfant de SVGGElement gDoorway, le robot est maintenant derrière la porte parce que l'ordre z de la porte est maintenant un plus l'ordre z du robot.

A Passez à la vitesse supérieure est presque aussi facile.

parent.insertBefore(parent.removeChild(gRobot), gDoorway.nextSibling())

Il suffit de penser a=a et b=b pour s'en souvenir.

insert after = move above
insert before = move below

Laisser le DOM dans un état cohérent avec la vue

La raison pour laquelle cette réponse est correcte est qu'elle est minimale et complète et, comme les internes des produits Adobe ou d'autres éditeurs graphiques bien conçus, laisse la représentation interne dans un état qui est cohérent avec la vue créée par le rendu.

Approche alternative mais limitée

Une autre approche couramment utilisée consiste à utiliser le z-index CSS en conjonction avec plusieurs fragments de document SVG (balises SVG) avec des arrière-plans essentiellement transparents dans tous les fragments sauf celui du bas. Là encore, cela va à l'encontre de l'élégance du modèle de rendu SVG, car il est difficile de déplacer les objets vers le haut ou vers le bas dans l'ordre z.

---

NOTES :

1. ( https://www.w3.org/TR/SVG/render.html v 1.1, 2e édition, 16 août 2011)

   3.3 Ordre de rendu Les éléments d'un fragment de document SVG ont un ordre de dessin implicite, les premiers éléments du document SVG sont "peints" en premier. Les éléments suivants sont peints sur par-dessus les éléments précédemment peints.

   3.4 Comment les groupes sont rendus Les éléments de regroupement tels que l'élément 'g' (voir les éléments de conteneur) ont pour effet de produire un canevas temporaire temporaire initialisé à la couleur noire transparente sur lequel les éléments sont peints. Une fois le groupe terminé, tout effet de filtre spécifié pour le groupe est appliqué pour créer un canevas temporaire modifié. temporaire modifié. Le canevas temporaire modifié est intégré à l'arrière-plan arrière-plan, en tenant compte de tous les paramètres de masquage et d'opacité du groupe. du groupe.