z-index SVG non funziona? Ordina i tracciati

Se un tracciato SVG rimane dietro un'altra forma dopo che hai aumentato il suo z-index CSS, esamina l'ordine degli elementi nell'SVG. Nel normale ordine di disegno SVG, la forma precedente viene disegnata per prima e quelle successive la coprono. Per portare avanti un tracciato, posizionalo dopo le forme che deve coprire. Il modello di rendering SVG definisce questo ordine.

Stabilisci prima dove si verifica la sovrapposizione. Un intero SVG dietro l'intestazione di una pagina è un problema di layout HTML; due forme all'interno dello stesso SVG sono un problema di ordine della grafica. La correzione qui sotto riguarda il secondo caso.

Guarda la differenza su un emblema

Abbiamo disegnato un emblema originale in tre parti: una stella arancione, un disco blu e un nastro verde. Nel pannello a sinistra, la stella viene per prima nell'SVG e ha CSS position: relative e z-index: 999. Il browser calcola quel valore z-index, ma il disco e il nastro successivi coprono ancora la stella. Nel pannello a destra cambia soltanto l'ordine degli elementi: la stessa stella è ultima e appare davanti.

Il test ha usato HeadlessChrome 141 con uno screenshot di 1200 × 680. L'ordine dei figli riportato era stella, disco, nastro a sinistra e disco, nastro, stella a destra. È un test circoscritto di normali figli SVG sovrapposti, non una promessa su ogni renderer, gruppo annidato o effetto.

Correggi l'ordine nel file SVG

Apri la sorgente SVG in un editor di testo o esaminane gli oggetti in un editor vettoriale. Trova le forme sovrapposte e leggile dall'alto verso il basso nel file. Gli elementi fratelli precedenti vengono disegnati per primi. Sposta l'oggetto che deve apparire davanti dopo gli oggetti che deve coprire, poi salva una copia.

Per esempio, questo disegno semplificato mette la stella per ultima:

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

I dati dei tracciati e i colori di riempimento non devono cambiare per questa correzione. Se un'app di design ha un comando Bring to Front, esporta poi l'SVG ed esamina il markup salvato o riaprilo. Il pannello dei livelli visibile nell'editor è utile, ma il file consegnato è ciò che legge il renderer successivo.

Per un SVG interattivo, JavaScript può spostare un figlio esistente alla fine del suo genitore attuale:

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

Il riferimento MDN di appendChild conferma che aggiungere un nodo esistente lo sposta anziché creare una seconda copia. Usalo soltanto quando cambiare il DOM fa parte dell'applicazione. Un file di logo statico è di solito più chiaro se inserisci l'ordine desiderato nell'SVG stesso.

Controlla gruppi, fori e altri tipi di ordine

Se la stella appartiene a un gruppo, spostarla alla fine all'interno di quel gruppo può lasciare comunque l'intero gruppo dietro un gruppo fratello successivo. Esamina la struttura dei genitori. Sposta il gruppo pertinente quando deve avanzare l'intera grafica raggruppata; riordina i suoi figli quando si sovrappongono soltanto parti di quel gruppo. Fai attenzione quando sposti un figlio fuori dal gruppo: il gruppo può contenere trasformazioni, ritagli, opacità o una maschera. La sezione sui gruppi del modello di rendering SVG spiega perché il contenuto raggruppato viene renderizzato insieme.

Una correzione dell'ordine degli oggetti non può nemmeno riparare un vero foro o spazio nella geometria dei tracciati. Se il centro di una lettera o di un emblema si riempie dopo l'esportazione, esamina le forme e il file di destinazione. Un oggetto opaco successivo potrebbe semplicemente coprire l'apertura. La guida ai fori SVG aiuta a distinguere quel caso dai problemi di fill-rule o contorno. Se invece appare una sottile linea bianca tra forme adiacenti, usa la diagnosi degli spazi prima di cambiare l'ordine.

Infine, paint-order è un'impostazione diversa. Cambia quando vengono disegnati riempimento, tratto e marcatori di un singolo elemento; non mette quell'elemento sopra un tracciato vicino. Il riferimento MDN di paint-order definisce questo ambito. Usa la guida a paint-order quando un contorno spesso nasconde il proprio riempimento, anziché quando una parte colorata del logo ne nasconde un'altra.

Lo z-index CSS continua a contare per i riquadri HTML posizionati e gli elementi flex o grid, come documenta MDN. Tieni distinto quel caso di layout della pagina dall'ordine dei tracciati memorizzato nell'SVG.

Come funziona con PerfectVector

Usa un originale SVG esistente se ne hai uno. Vettorializzarlo di nuovo introdurrebbe un nuovo insieme di forme senza risolvere la decisione sui livelli. Se l'unica sorgente è un logo PNG o JPG appiattito, PerfectVector può aiutare prima nel flusso: trasforma l'immagine in un candidato SVG, poi esamina le parti separate e la loro sovrapposizione in un editor. Sposta i tracciati recuperati nell'ordine desiderato prima della consegna. La conversione non assegna gli oggetti in primo piano del tuo disegno e non garantisce che una piccola apertura sopravviva al ricalco.

Quando l'immagine sorgente contiene sfocatura, ombre o scritte minuscole, un ridisegno manuale di quei dettagli può essere più affidabile del ricalco. La guida generale alla modifica degli SVG tratta la pulizia dei tracciati dopo la conversione.

Verifica il file che consegnerai

1. Salva una copia della sorgente SVG e riordina soltanto l'oggetto o il gruppo desiderato.
2. Apri il file salvato in un browser alla dimensione in cui conta la sovrapposizione. Confrontalo con il disegno sorgente.
3. Riaprilo nell'editor o nell'app di destinazione. Controlla la stessa sovrapposizione, oltre a maschere, aree ritagliate e fori.
4. Se l'SVG è interattivo, prova il comportamento del puntatore e dell'hover dopo il riordino. Una forma ora in cima può ricevere l'interazione che prima riceveva un'altra forma.
5. Se il risultato sembra errato soltanto a uno zoom o a una dimensione di esportazione, esamina giunzioni dovute al campionamento o veri spazi prima di spostare altri oggetti.

Per una sorgente soltanto raster, crea un candidato SVG con PerfectVector, poi esamina l'ordine dei tracciati, le aperture e il rendering salvato alla dimensione desiderata. Se il file contiene già le forme vettoriali giuste, parti dal riordino.

FAQ

Posso usare lo z-index CSS per portare un tracciato SVG davanti? Per normali forme sorelle all'interno di un SVG, sposta il tracciato più avanti nell'ordine del documento SVG. Uno z-index CSS che agisce sui riquadri circostanti della pagina non riordina in modo affidabile quelle forme figlie.

paint-order cambia quale oggetto SVG si trova sopra? No. Paint-order cambia la sequenza di riempimento, tratto e marcatori all'interno di una forma o di un elemento di testo. Riordina gli oggetti separati per cambiare quale copre l'altro.

Perché un tracciato è ancora nascosto dopo averlo spostato per ultimo nel gruppo? Il suo intero gruppo potrebbe trovarsi dietro un altro gruppo. Esamina i gruppi genitori ed eventuali trasformazioni, ritagli, maschere o opacità prima di spostare il figlio fuori dal gruppo.

Fonti

1. W3C — Modello di rendering SVG 1.1 — Definisce l'ordine di disegno degli elementi in un documento SVG.
2. MDN — Node.appendChild() — Documenta come si sposta un figlio DOM esistente quando viene aggiunto.
3. MDN — Attributo SVG paint-order — Limita paint-order a riempimento, tratto e marcatori di una forma.
4. MDN — Proprietà CSS z-index — Spiega z-index per elementi posizionati e di layout nella sovrapposizione della pagina.
5. W3C — Modello di rendering SVG 2 — Descrive contesti di sovrapposizione SVG, raggruppamento e individuazione del bersaglio del puntatore.