SVG z-index inactif ? Corrige l’ordre des tracés

Si un tracé SVG reste derrière une autre forme après augmentation de son z-index CSS, examine l’ordre des éléments dans le SVG. Dans l’ordre de dessin SVG habituel, la première forme est peinte d’abord, puis les suivantes la recouvrent. Pour placer un tracé devant, mets-le après les formes qu’il doit recouvrir. Le modèle de rendu SVG définit cet ordre.

Détermine d’abord où se produit la superposition. Un SVG entier situé derrière l’en-tête d’une page relève de la disposition HTML ; deux formes dans le même SVG relèvent de l’ordre des objets de l’illustration. La correction ci-dessous traite le second cas.

Observe la différence sur un emblème

Nous avons dessiné un emblème original en trois parties : étoile orange, disque bleu et ruban vert. Dans le panneau de gauche, l’étoile apparaît d’abord dans le SVG et possède les propriétés CSS position: relative et z-index: 999. Le navigateur calcule cette valeur z-index, mais le disque et le ruban suivants recouvrent toujours l’étoile. Dans le panneau de droite, seul l’ordre des éléments change : la même étoile arrive en dernier et apparaît devant.

Le test utilisait HeadlessChrome 141 avec une capture de 1200 × 680. L’ordre des enfants signalé était étoile, disque, ruban à gauche, puis disque, ruban, étoile à droite. Ce test limité porte sur des enfants SVG ordinaires qui se superposent ; il ne garantit pas le comportement de tous les moteurs de rendu, groupes imbriqués ou effets.

Corrige l’ordre dans le fichier SVG

Ouvre la source SVG dans un éditeur de texte ou examine ses objets dans un éditeur vectoriel. Trouve les formes qui se superposent et lis-les de haut en bas dans le fichier. Les éléments frères situés plus tôt sont peints d’abord. Place l’objet qui doit apparaître devant après les objets qu’il doit recouvrir, puis enregistre une copie.

Par exemple, ce dessin simplifié place l’étoile en dernier :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 160">
  <circle cx="120" cy="80" r="55" fill="#4f86df"/>
  <path d="M20 90 Q110 60 220 100 L220 125 Q110 85 20 115Z"
        fill="#22a79a"/>
  <path id="star" d="M120 20 L135 60 175 62 145 88 155 130
           120 108 85 130 95 88 65 62 105 60Z"
        fill="#ff8c64"/>
</svg>

Les données de tracé et les couleurs de remplissage n’ont pas besoin de changer pour cette correction. Si une application de design possède une commande Bring to Front, exporte ensuite le SVG et examine le code enregistré ou rouvre-le. Le panneau visible des calques d’un éditeur est utile, mais c’est le fichier livré que lit le moteur de rendu suivant.

Pour un SVG interactif, JavaScript peut déplacer un enfant existant à la fin de son parent actuel :

const star = document.querySelector("#star");
star.parentNode.appendChild(star);

La référence MDN de appendChild confirme qu’ajouter un nœud existant le déplace au lieu d’en créer une seconde copie. Utilise cette méthode uniquement si la modification du DOM fait partie de l’application. Pour un logo statique, il est généralement plus clair de définir l’ordre souhaité dans le SVG lui-même.

Vérifie les groupes, les trous et les autres types d’ordre

Si l’étoile appartient à un groupe, la déplacer à la fin à l’intérieur de ce groupe peut laisser le groupe entier derrière un groupe frère suivant. Examine la structure parente. Déplace le groupe concerné si toute l’illustration groupée doit passer devant ; réordonne ses enfants si seules des parties de ce groupe se superposent. Fais attention quand tu sors un enfant de son groupe : le groupe peut porter des transformations, un découpage, une opacité ou un masque. La section du modèle de rendu SVG sur les groupes explique pourquoi le contenu groupé est rendu ensemble.

Corriger l’ordre des objets ne peut pas non plus réparer un véritable trou ou espace dans la géométrie d’un tracé. Si le centre d’une lettre ou d’un emblème se remplit après exportation, examine les formes et le fichier de destination. Un objet opaque ultérieur peut simplement recouvrir l’ouverture. Le guide des trous SVG aide à distinguer ce cas des problèmes de fill-rule ou de contours. Si une fine ligne blanche apparaît plutôt entre des formes adjacentes, consulte le diagnostic des espaces avant de modifier l’empilement.

Enfin, paint-order est un autre réglage. Il change le moment où sont peints le remplissage, le contour et les marqueurs d’un seul élément ; il ne place pas cet élément au-dessus d’un tracé voisin. La référence MDN de paint-order définit cette portée. Utilise le guide de paint-order lorsqu’un contour épais masque son propre remplissage, plutôt que lorsqu’une partie colorée d’un logo en masque une autre.

Le z-index CSS compte toujours pour les boîtes HTML positionnées et les éléments flex ou grid, comme le décrit MDN. Distingue ce cas de disposition de page de l’ordre des tracés enregistré dans le SVG.

Comment cela se présente avec PerfectVector

Utilise un original SVG existant si tu en possèdes un. Le vectoriser à nouveau créerait un nouvel ensemble de formes sans résoudre le choix des calques. Si la seule source est un logo PNG ou JPG aplati, PerfectVector peut intervenir plus tôt : transforme l’image en candidat SVG, puis examine les parties séparées et leur superposition dans un éditeur. Place les tracés reconstruits dans l’ordre souhaité avant livraison. La conversion ne désigne pas les objets de premier plan de ton dessin et ne garantit pas qu’une petite ouverture survive à la vectorisation.

Si l’image source comporte du flou, des ombres ou de petites lettres, redessiner manuellement ces détails peut être plus fiable que les vectoriser. Le guide général de modification des SVG traite du nettoyage des tracés après conversion.

Vérifie le fichier que tu vas livrer

1. Enregistre une copie du SVG source et réordonne uniquement l’objet ou le groupe concerné.
2. Ouvre le fichier enregistré dans un navigateur à la taille où la superposition compte. Compare-le au dessin source.
3. Rouvre-le dans l’éditeur ou l’application destinataire. Vérifie la même superposition, ainsi que les masques, les zones découpées et les trous.
4. Si le SVG est interactif, teste le comportement du pointeur et du survol après le réordonnement. Une forme nouvellement placée au-dessus peut recevoir l’interaction auparavant destinée à une autre.
5. Si le résultat semble incorrect à un seul niveau de zoom ou une seule taille d’export, recherche des jointures dues à l’échantillonnage ou de véritables espaces avant de déplacer davantage d’objets.

Pour une source uniquement matricielle, crée un candidat SVG avec PerfectVector, puis examine l’ordre de ses tracés, ses ouvertures et son rendu enregistré à la taille souhaitée. Si le fichier contient déjà les bonnes formes vectorielles, commence par les réordonner.

FAQ

Puis-je utiliser le z-index CSS pour placer un tracé SVG devant ? Pour des formes sœurs ordinaires dans un même SVG, place le tracé plus loin dans l’ordre du document SVG. Un z-index CSS qui agit sur les boîtes de la page environnante ne réordonne pas ces formes enfants de façon fiable.

paint-order change-t-il l’objet SVG situé au-dessus ? Non. Paint-order change la séquence du remplissage, du contour et des marqueurs dans une seule forme ou un élément texte. Réordonne les objets séparés pour changer celui qui recouvre l’autre.

Pourquoi un tracé reste-t-il masqué après l’avoir placé en dernier dans son groupe ? Son groupe entier peut se trouver derrière un autre groupe. Examine les groupes parents et les transformations, découpages, masques ou opacités avant de sortir l’enfant de son groupe.

Sources

1. W3C — modèle de rendu SVG 1.1 — Définit l’ordre de peinture des éléments dans un document SVG.
2. MDN — Node.appendChild() — Décrit comment un enfant DOM existant se déplace lorsqu’il est ajouté.
3. MDN — attribut SVG paint-order — Limite paint-order au remplissage, au contour et aux marqueurs d’une forme.
4. MDN — propriété CSS z-index — Explique z-index pour les éléments positionnés et de disposition dans l’empilement d’une page.
5. W3C — modèle de rendu SVG 2 — Décrit les contextes d’empilement SVG, les groupes et le ciblage du pointeur.