SVG z-index ohne Wirkung? Pfadreihenfolge korrigieren

Wenn ein SVG-Pfad trotz erhöhtem CSS-z-index hinter einer anderen Form bleibt, prüfe die Reihenfolge der Elemente im SVG. In der üblichen SVG-Zeichenreihenfolge wird die frühere Form zuerst gezeichnet und von späteren Formen verdeckt. Um einen Pfad nach vorn zu bringen, platziere ihn nach den Formen, die er verdecken soll. Das SVG-Renderingmodell definiert diese Reihenfolge.

Kläre zuerst, wo die Überlappung auftritt. Ein vollständiges SVG hinter einer Seitenkopfzeile ist ein HTML-Layoutproblem; zwei Formen innerhalb desselben SVGs betreffen die Reihenfolge der Grafikobjekte. Die folgende Korrektur behandelt den zweiten Fall.

Sieh den Unterschied an einem Emblem

Wir haben ein eigenes dreiteiliges Emblem gezeichnet: einen orangefarbenen Stern, eine blaue Scheibe und ein grünes Band. Links steht der Stern im SVG zuerst und hat die CSS-Werte position: relative und z-index: 999. Der Browser berechnet diesen z-index-Wert, aber die später folgende Scheibe und das Band verdecken den Stern weiterhin. Rechts ändert sich nur die Elementreihenfolge: Derselbe Stern steht zuletzt und erscheint im Vordergrund.

Der Test verwendete HeadlessChrome 141 mit einem Screenshot von 1200 × 680. Die gemeldete Reihenfolge der Kindelemente war links Stern, Scheibe, Band und rechts Scheibe, Band, Stern. Das ist ein eng begrenzter Test gewöhnlicher überlappender SVG-Kindelemente, keine Zusage für jeden Renderer, jede verschachtelte Gruppe oder jeden Effekt.

Korrigiere die Reihenfolge in der SVG-Datei

Öffne die SVG-Quelle in einem Texteditor oder prüfe ihre Objekte in einem Vektoreditor. Finde die überlappenden Formen und lies sie in der Datei von oben nach unten. Frühere Geschwisterelemente werden zuerst gezeichnet. Verschiebe das Objekt, das vorn erscheinen soll, hinter die Objekte, die es verdecken soll, und speichere dann eine Kopie.

Diese vereinfachte Zeichnung platziert beispielsweise den Stern zuletzt:

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

Für diese Korrektur müssen sich Pfaddaten und Füllfarben nicht ändern. Wenn eine Designanwendung einen Befehl zum Platzieren im Vordergrund hat, exportiere anschließend das SVG und prüfe das gespeicherte Markup oder öffne es erneut. Der sichtbare Ebenenbereich eines Editors ist hilfreich, aber die gelieferte Datei ist das, was der nächste Renderer liest.

Bei einem interaktiven SVG kann JavaScript ein bestehendes Kindelement ans Ende seines aktuellen Elternelements verschieben:

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

MDNs Referenz zu appendChild bestätigt, dass das Anhängen eines bestehenden Knotens diesen verschiebt, statt eine zweite Kopie zu erzeugen. Nutze dies nur, wenn die DOM-Änderung Teil der Anwendung ist. Bei einer statischen Logodatei ist es meist übersichtlicher, die gewünschte Reihenfolge direkt im SVG festzulegen.

Prüfe Gruppen, Löcher und andere Reihenfolgen

Wenn der Stern zu einer Gruppe gehört, kann das Verschieben ans Ende innerhalb dieser Gruppe die gesamte Gruppe trotzdem hinter einer späteren Geschwistergruppe lassen. Prüfe die Elternstruktur. Verschiebe die betreffende Gruppe, wenn die gesamte gruppierte Grafik nach vorn soll; ordne ihre Kinder um, wenn sich nur Teile innerhalb der Gruppe überlappen. Sei vorsichtig, wenn du ein Kind aus seiner Gruppe herausbewegst: Die Gruppe kann Transformationen, Beschneidung, Deckkraft oder eine Maske enthalten. Der Gruppenabschnitt des SVG-Renderingmodells erklärt, warum gruppierte Inhalte zusammen gerendert werden.

Eine Korrektur der Objektreihenfolge kann außerdem weder ein echtes Loch noch eine Lücke in der Pfadgeometrie reparieren. Wenn sich die Mitte eines Buchstabens oder Emblems nach dem Export füllt, prüfe die Formen und die Zieldatei. Ein späteres deckendes Objekt verdeckt möglicherweise nur die Öffnung. Der Leitfaden zu SVG-Löchern hilft, diesen Fall von Problemen mit Füllregeln oder Konturen zu unterscheiden. Wenn stattdessen eine dünne weiße Linie zwischen benachbarten Formen erscheint, nutze die Lückendiagnose, bevor du die Stapelung änderst.

Schließlich ist paint-order eine andere Einstellung. Sie ändert, wann Füllung, Kontur und Markierungen eines einzelnen Elements gezeichnet werden; sie platziert dieses Element nicht über einem benachbarten Pfad. Die MDN-Referenz zu paint-order definiert diesen Umfang. Nutze den Leitfaden zu paint-order, wenn eine dicke Kontur ihre eigene Füllung verdeckt, statt wenn ein farbiges Logoteil ein anderes verdeckt.

CSS-z-index bleibt für positionierte HTML-Boxen und Flex- oder Grid-Elemente relevant, wie MDN dokumentiert. Halte diesen Seitenlayoutfall von der im SVG gespeicherten Pfadreihenfolge getrennt.

So passt PerfectVector in den Ablauf

Verwende ein vorhandenes SVG-Original, wenn du eines hast. Eine erneute Vektorisierung würde neue Formen erzeugen, ohne die Entscheidung über die Ebenen zu lösen. Wenn nur ein flach gerendertes PNG- oder JPG-Logo vorhanden ist, kann PerfectVector früher im Workflow helfen: Wandle das Bild in einen SVG-Kandidaten um und prüfe anschließend die separaten Teile und ihre Überlappung in einem Editor. Ordne die rekonstruierten Pfade vor der Weitergabe wie gewünscht an. Die Konvertierung legt die Vordergrundobjekte deines Designs nicht fest und garantiert nicht, dass eine kleine Öffnung das Nachzeichnen übersteht.

Wenn das Quellbild Unschärfe, Schatten oder winzige Schrift enthält, kann eine manuelle Neuzeichnung dieser Details zuverlässiger sein als das Nachzeichnen. Der umfassendere Leitfaden zur SVG-Bearbeitung behandelt die Pfadbereinigung nach der Konvertierung.

Prüfe die Datei, die du weitergeben wirst

1. Speichere eine Kopie des Quell-SVGs und ordne nur das gewünschte Objekt oder die gewünschte Gruppe um.
2. Öffne die gespeicherte Datei im Browser in der Größe, bei der die Überlappung relevant ist. Vergleiche sie mit dem Quelldesign.
3. Öffne sie erneut im empfangenden Editor oder in der App. Prüfe dieselbe Überlappung sowie Masken, beschnittene Bereiche und Löcher.
4. Ist das SVG interaktiv, teste nach dem Umordnen Zeiger- und Hover-Verhalten. Eine nun oben liegende Form kann Interaktionen empfangen, die zuvor eine andere Form empfing.
5. Wenn das Ergebnis nur bei einer Zoomstufe oder Exportgröße falsch aussieht, prüfe auf Abtastungsnähte oder echte Lücken, bevor du weitere Objekte verschiebst.

Für eine reine Rasterquelle erstelle mit PerfectVector einen SVG-Kandidaten und prüfe dann Pfadreihenfolge, Öffnungen und gespeicherte Darstellung in der gewünschten Größe. Wenn die Datei bereits die richtigen Vektorformen enthält, beginne mit dem Umordnen.

FAQ

Kann ich mit CSS-z-index einen SVG-Pfad in den Vordergrund bringen? Für gewöhnliche Geschwisterformen innerhalb eines SVGs verschiebe den Pfad weiter nach hinten in der SVG-Dokumentreihenfolge. Ein CSS-z-index, der umgebende Seitenboxen beeinflusst, ordnet diese Kindformen nicht zuverlässig um.

Ändert paint-order, welches SVG-Objekt oben liegt? Nein. Paint-order ändert die Reihenfolge von Füllung, Kontur und Markierungen innerhalb einer Form oder eines Textelements. Ordne separate Objekte um, um zu ändern, welches ein anderes verdeckt.

Warum bleibt ein Pfad verborgen, nachdem ich ihn ans Ende seiner Gruppe verschoben habe? Seine gesamte Gruppe kann hinter einer anderen Gruppe liegen. Prüfe die Elterngruppen und mögliche Transformationen, Beschneidung, Masken oder Deckkraft, bevor du das Kind aus seiner Gruppe herausbewegst.

Quellen

1. W3C — SVG 1.1 Rendering Model — Definiert die Zeichenreihenfolge von Elementen in einem SVG-Dokument.
2. MDN — Node.appendChild() — Dokumentiert, wie ein bestehendes DOM-Kindelement beim Anhängen verschoben wird.
3. MDN — SVG-Attribut paint-order — Begrenzt paint-order auf Füllung, Kontur und Markierungen einer Form.
4. MDN — CSS-Eigenschaft z-index — Erklärt z-index für positionierte Elemente und Layoutelemente bei der Seitenstapelung.
5. W3C — SVG 2 Rendering Model — Beschreibt SVG-Stapelkontexte, Gruppierung und Zielbestimmung bei Zeigerinteraktionen.