z-index w SVG nie działa? Popraw kolejność nakładania ścieżek

Jeśli ścieżka SVG pozostaje za innym kształtem po zwiększeniu jej wartości z-index w CSS, sprawdź kolejność elementów w SVG. Przy typowej kolejności rysowania w SVG wcześniejszy kształt jest rysowany jako pierwszy, a późniejsze kształty go przykrywają. Aby przenieść ścieżkę na wierzch, umieść ją po kształtach, które ma przykrywać. Tę kolejność określa model renderowania SVG.

Najpierw ustal, gdzie występuje nakładanie. Całe SVG znajdujące się za nagłówkiem strony to problem układu HTML; dwa kształty wewnątrz tego samego SVG to problem kolejności elementów grafiki. Poniższa poprawka dotyczy drugiego przypadku.

Zobacz różnicę na przykładzie jednego emblematu

Narysowaliśmy autorski emblemat z trzech części: pomarańczowej gwiazdy, niebieskiego koła i zielonej wstęgi. W lewym panelu gwiazda występuje jako pierwsza w SVG i ma ustawienia CSS position: relative oraz z-index: 999. Przeglądarka oblicza tę wartość z-index, ale późniejsze koło i wstęga nadal przykrywają gwiazdę. W prawym panelu zmienia się tylko kolejność elementów: ta sama gwiazda jest ostatnia i pojawia się na wierzchu.

W teście użyto HeadlessChrome 141 i zrzutu ekranu o wymiarach 1200 × 680. Zgłoszona kolejność elementów potomnych to gwiazda, koło, wstęga po lewej oraz koło, wstęga, gwiazda po prawej. To test o wąskim zakresie, dotyczący zwykłych nakładających się elementów potomnych SVG, a nie gwarancja zachowania każdego renderera, zagnieżdżonej grupy czy efektu.

Popraw kolejność w pliku SVG

Otwórz kod źródłowy SVG w edytorze tekstu lub sprawdź jego obiekty w edytorze grafiki wektorowej. Znajdź nakładające się kształty i prześledź je w pliku od góry do dołu. Wcześniejsze elementy mające wspólnego rodzica są rysowane jako pierwsze. Przenieś obiekt, który ma pojawiać się na wierzchu, za obiekty, które powinien przykrywać, a następnie zapisz kopię.

Na przykład w tym uproszczonym rysunku gwiazda jest ostatnia:

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

Ta poprawka nie wymaga zmiany danych ścieżek ani kolorów wypełnienia. Jeśli aplikacja do projektowania ma polecenie Bring to Front („Przenieś na wierzch”), po jego użyciu wyeksportuj SVG i sprawdź zapisany kod lub ponownie otwórz plik. Widoczny panel warstw edytora jest pomocny, ale kolejny renderer odczytuje dostarczony plik.

W interaktywnym SVG JavaScript może przenieść istniejący element potomny na koniec listy elementów jego bieżącego rodzica:

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

Dokumentacja appendChild w MDN potwierdza, że dodanie istniejącego węzła na końcu przenosi go, zamiast tworzyć drugą kopię. Korzystaj z tego tylko wtedy, gdy zmiana DOM jest częścią działania aplikacji. W przypadku statycznego pliku logo zwykle czytelniej jest ustawić zamierzoną kolejność w samym SVG.

Sprawdź grupy, otwory i inne rodzaje kolejności

Jeśli gwiazda należy do grupy, przeniesienie jej na koniec wewnątrz tej grupy może nadal pozostawić całą grupę za późniejszą grupą mającą tego samego rodzica. Sprawdź strukturę elementów nadrzędnych. Przenieś odpowiednią grupę, gdy cała zgrupowana grafika ma znaleźć się na wierzchu; zmień kolejność jej elementów potomnych, gdy nakładają się tylko części wewnątrz tej grupy. Zachowaj ostrożność przy przenoszeniu elementu potomnego poza jego grupę: grupa może mieć przypisane transformacje, przycinanie, krycie lub maskę. Sekcja modelu renderowania SVG poświęcona grupom wyjaśnia, dlaczego zgrupowana zawartość jest renderowana razem.

Zmiana kolejności obiektów nie naprawi też rzeczywistego otworu ani szczeliny w geometrii ścieżki. Jeśli po eksporcie środek litery lub emblematu staje się wypełniony, sprawdź kształty i plik docelowy. Późniejszy nieprzezroczysty obiekt może po prostu przykrywać otwór. Poradnik dotyczący otworów w SVG pomaga odróżnić ten przypadek od problemów z fill-rule lub konturami. Jeśli zamiast tego między sąsiadującymi kształtami pojawia się cienka biała linia, skorzystaj z diagnostyki szczelin, zanim zmienisz kolejność nakładania.

Na koniec pamiętaj, że paint-order to inne ustawienie. Zmienia kolejność rysowania wypełnienia, obrysu i znaczników jednego elementu; nie umieszcza tego elementu nad sąsiednią ścieżką. Dokumentacja paint-order w MDN określa ten zakres działania. Skorzystaj z poradnika dotyczącego paint-order, gdy gruby obrys zasłania własne wypełnienie, a nie wtedy, gdy jeden kolorowy fragment logo zasłania drugi.

CSS z-index nadal ma znaczenie dla pozycjonowanych boksów HTML oraz elementów układów flex i grid, co opisuje dokumentacja MDN. Rozpatruj ten przypadek dotyczący układu strony oddzielnie od kolejności ścieżek zapisanej wewnątrz SVG.

Jak to wygląda w PerfectVector

Jeśli masz istniejący główny plik SVG, użyj go. Ponowna wektoryzacja wprowadziłaby nowy zestaw kształtów, nie rozstrzygając, które mają znaleźć się na wierzchu. Jeśli jedynym źródłem jest spłaszczone logo PNG lub JPG, PerfectVector może pomóc na wcześniejszym etapie pracy: przekształć obraz we wstępną wersję SVG, a następnie sprawdź w edytorze poszczególne części i ich nakładanie. Przed przekazaniem pliku ustaw odtworzone ścieżki w zamierzonej kolejności. Konwersja nie określa, które obiekty Twojego projektu mają być na pierwszym planie, ani nie gwarantuje, że mały otwór zostanie zachowany podczas wektoryzacji.

Gdy obraz źródłowy zawiera rozmycie, cienie lub drobne litery, ręczne przerysowanie tych szczegółów może być bardziej niezawodne niż wektoryzacja. Szerszy poradnik edycji SVG omawia porządkowanie ścieżek po konwersji.

Sprawdź plik, który przekażesz

1. Zapisz kopię źródłowego SVG i zmień kolejność tylko wybranego obiektu lub grupy.
2. Otwórz zapisany plik w przeglądarce w rozmiarze, przy którym nakładanie ma znaczenie. Porównaj go z projektem źródłowym.
3. Otwórz go ponownie w docelowym edytorze lub aplikacji. Sprawdź to samo nakładanie, a także wszelkie maski, przycięte obszary i otwory.
4. Jeśli SVG jest interaktywne, po zmianie kolejności przetestuj działanie wskaźnika i zachowanie po najechaniu. Kształt, który znalazł się na samej górze, może przejmować interakcje w miejscu, w którym wcześniej odbierał je inny kształt.
5. Jeśli wynik wygląda nieprawidłowo tylko przy jednym poziomie powiększenia lub rozmiarze eksportu, sprawdź, czy występują linie na styku kształtów wynikające z próbkowania lub rzeczywiste szczeliny, zanim przeniesiesz kolejne obiekty.

Jeśli źródło jest wyłącznie rastrowe, utwórz wstępną wersję SVG za pomocą PerfectVector, a następnie sprawdź kolejność ścieżek, otwory i render zapisanego pliku w docelowym rozmiarze. Jeśli plik zawiera już właściwe kształty wektorowe, zacznij od zmiany kolejności.

Najczęściej zadawane pytania

Czy mogę użyć CSS z-index, aby przenieść jedną ścieżkę SVG na wierzch? W przypadku zwykłych kształtów mających wspólnego rodzica wewnątrz jednego SVG przenieś ścieżkę na późniejszą pozycję w kolejności dokumentu SVG. CSS z-index wpływający na otaczające boksy strony nie zmienia niezawodnie kolejności tych kształtów potomnych.

Czy paint-order zmienia to, który obiekt SVG jest na wierzchu? Nie. Paint-order zmienia kolejność wypełnienia, obrysu i znaczników w obrębie jednego kształtu lub elementu tekstowego. Zmień kolejność osobnych obiektów, aby określić, który przykrywa drugi.

Dlaczego ścieżka nadal jest ukryta po przeniesieniu jej na koniec grupy? Cała jej grupa może znajdować się za inną grupą. Sprawdź grupy nadrzędne oraz wszelkie transformacje, przycinanie, maski i krycie, zanim przeniesiesz element potomny poza jego grupę.

Źródła

1. W3C — SVG 1.1 Rendering Model — Określa kolejność rysowania elementów w dokumencie SVG.
2. MDN — Node.appendChild() — Opisuje, jak istniejący element potomny DOM jest przenoszony po dodaniu go na końcu.
3. MDN — SVG paint-order attribute — Ogranicza działanie paint-order do wypełnienia, obrysu i znaczników kształtu.
4. MDN — CSS z-index property — Wyjaśnia działanie z-index dla elementów pozycjonowanych i elementów układu w kontekście nakładania na stronie.
5. W3C — SVG 2 Rendering Model — Opisuje konteksty nakładania SVG, grupowanie i wybór elementów docelowych dla wskaźnika.