Używam kręgów SVG w moim projekcie w ten sposób,
<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>
Używam indeksu Z w g
tagu, aby pokazać elementy jako pierwsze. W moim projekcie muszę użyć tylko wartości z-index, ale nie mogę użyć z-index do moich elementów svg. Dużo szukałem w Google, ale względnie niczego nie znalazłem. Więc proszę, pomóż mi używać indeksu Z w moim pliku SVG.
Oto DEMO.
javascript
jquery
svg
z-index
Karthi Keyan
źródło
źródło
Odpowiedzi:
Specyfikacja
W specyfikacji SVG w wersji 1.1 kolejność renderowania jest oparta na kolejności dokumentów:
Odniesienie do SVG 1.1. Specyfikacja
Rozwiązanie (czystsze - szybsze)
Jako ostatni obiekt do narysowania należy umieścić zielone kółko. Więc zamień te dwa elementy.
Tutaj widelec twojego jsFiddle .
Rozwiązanie (alternatywne)
Znacznik
use
z atrybutemxlink:href
i jako wartość identyfikator elementu. Pamiętaj, że może to nie być najlepsze rozwiązanie, nawet jeśli wynik wydaje się dobry. Mając trochę czasu, tutaj link do specyfikacji SVG 1.1 "użyj" Elementu .Uwagi dotyczące SVG 2
Specyfikacja SVG 2 jest następną główną wersją i nadal obsługuje powyższe funkcje.
źródło
Jak powiedzieli inni tutaj, indeks z jest definiowany przez kolejność, w jakiej element pojawia się w DOM. Jeśli ręczna zmiana kolejności HTML nie wchodzi w grę lub byłaby trudna, możesz użyć D3, aby zmienić kolejność grup / obiektów SVG.
Użyj D3, aby zaktualizować kolejność DOM i naśladować funkcję indeksu Z.
Aktualizacja indeksu Z elementu SVG za pomocą D3
Na najbardziej podstawowym poziomie (i jeśli nie używasz identyfikatorów do niczego innego), możesz użyć identyfikatorów elementów jako zastępczych dla indeksu z i zmienić ich kolejność. Poza tym możesz dać upust swojej wyobraźni.
Przykłady we fragmencie kodu
Podstawowa idea to:
Użyj D3, aby wybrać elementy SVG DOM.
Utwórz tablicę z-indeksów w relacji 1: 1 z elementami SVG (które chcesz zmienić). Tablice indeksu Z użyte w poniższych przykładach to identyfikatory, pozycja x i y, promienie itp.
Następnie użyj D3, aby powiązać indeksy z z tym wyborem.
Na koniec wywołaj D3.sort, aby zmienić kolejność elementów w DOM na podstawie danych.
Przykłady
[3,4,1,2,5]
przesuwa / zmienia kolejność trzeciego koła (w oryginalnej kolejności HTML) na 1. miejsce w DOM, 4. na 2., 1. na 3. , i tak dalej...źródło
Spróbuj odwrócić
#one
i#two
. Spójrz na to skrzypce: http://jsfiddle.net/hu2pk/3/Update
W SVG indeks z jest definiowany przez kolejność, w jakiej element pojawia się w dokumencie . Możesz też zajrzeć na tę stronę, jeśli chcesz: https://stackoverflow.com/a/482147/1932751
źródło
d3.selection.prototype.moveToFront = function() { return this.each(function() { this.parentNode.appendChild(this); }); };
A potem możesz powiedziećselection.moveToFront()
przez stackoverflow.com/questions/14167863/ ...Możesz użyć use .
Na górze pojawi się zielone kółko.
jsFiddle
źródło
#one
jest rysowany dwukrotnie. Ale jeśli chcesz, możesz ukryć pierwszą instancję za pomocą CSS.use
ma taki sam efekt jak klonowanie wspomnianego elementu DOM<g>
samego siebie podczas zmiany DOM przed załadowaniem i tak.Jak już wspomniano, svg renderują się w kolejności i nie uwzględniają z-index (na razie). Może po prostu wyślij określony element na spód jego rodzica, aby był renderowany jako ostatni.
Pracował dla mnie.
Aktualizacja
Jeśli masz zagnieżdżony plik SVG zawierający grupy, musisz wyprowadzić element z jego węzła nadrzędnego.
Fajną cechą SVG jest to, że każdy element zawiera swoją lokalizację niezależnie od tego, w jakiej grupie jest zagnieżdżony: +1:
źródło
Korzystanie z D3:
Jeśli chcesz ponownie wstawić każdy wybrany element, po kolei, jako ostatnie dziecko swojego rodzica.
źródło
selection.raise()
jest nowy w D3 od v4.Nie ma indeksu Z dla plików SVG. Ale svg określa, które z twoich elementów znajdują się najwyżej według ich pozycji w DOM. W ten sposób możesz usunąć obiekt i umieścić go na końcu pliku svg, czyniąc go „ostatnim renderowanym” elementem. Ten jest następnie wizualnie renderowany jako „najwyższy”.
Korzystanie z jQuery:
stosowanie:
Korzystanie z D3.js:
stosowanie:
źródło
Korzystanie z D3:
Jeśli chcesz dodać element w odwrotnej kolejności do wykorzystania danych:
Zamiast .append
Dodawanie elementu na górze elementu grupy
źródło
Innym rozwiązaniem byłoby użycie elementów div, które używają zIndex do przechowywania elementów SVG.Jak tutaj: https://stackoverflow.com/a/28904640/4552494
źródło
Czyste, szybkie i łatwe rozwiązania opublikowane na dzień udzielenia tej odpowiedzi są niezadowalające. Są one zbudowane na błędnym stwierdzeniu, że dokumenty SVG nie mają kolejności z. Biblioteki też nie są potrzebne. Jedna linia kodu może wykonać większość operacji, aby manipulować kolejnością obiektów lub grup obiektów z, które mogą być wymagane przy tworzeniu aplikacji, która przenosi obiekty 2D w przestrzeni xyz.
Porządek Z na pewno istnieje we fragmentach dokumentów SVG
To, co nazywamy fragmentem dokumentu SVG, jest drzewem elementów pochodzących z węzła podstawowego typu SVGElement. Węzeł główny fragmentu dokumentu SVG to SVGSVGElement, który odpowiada znacznikowi HTML5 <svg> . SVGGElement odpowiada znacznikowi <g> i umożliwia agregację elementów potomnych.
Posiadanie atrybutu z-index na SVGElement, tak jak w CSS, pokonałoby model renderowania SVG. Sekcje 3.3 i 3.4 W3C SVG Zalecenie v1.1 2nd Edition stwierdzają, że fragmenty dokumentów SVG (drzewa potomstwa z SVGSVGElement) są renderowane przy użyciu tak zwanego przeszukiwania w głąb drzewa . Ten schemat jest porządkiem az w każdym znaczeniu tego słowa.
Porządek Z jest w rzeczywistości skrótem do wizji komputerowej, który pozwala uniknąć prawdziwego renderowania 3D przy złożoności i wymaganiach obliczeniowych związanych ze śledzeniem promieni. Równanie liniowe dla niejawnego indeksu Z elementów we fragmencie dokumentu SVG.
Jest to ważne, ponieważ jeśli chcesz przenieść koło, które znajdowało się poniżej kwadratu, na nad nim, po prostu wstaw kwadrat przed okręgiem. Można to łatwo zrobić w JavaScript.
Metody wspomagające
Instancje SVGElement mają dwie metody, które obsługują prostą i łatwą manipulację porządkiem z.
Prawidłowa odpowiedź, która nie tworzy bałaganu
Ponieważ SVGGElement ( tag <g> ) można usunąć i wstawić równie łatwo jak SVGCircleElement lub jakikolwiek inny kształt, warstwy obrazu typowe dla produktów Adobe i innych narzędzi graficznych można z łatwością zaimplementować za pomocą SVGGElement. Ten JavaScript jest w zasadzie poleceniem Przesuń poniżej .
Jeśli warstwa robota narysowanego jako elementy podrzędne SVGGElement gRobot była przed drzwiami narysowana jako elementy podrzędne SVGGElement gDoorway, robot znajduje się teraz za drzwiami, ponieważ kolejność z drzwi wynosi teraz jeden plus kolejność z robota.
Move Przede polecenia jest niemal tak proste.
Pomyśl tylko a = a i b = b, żeby o tym pamiętać.
Pozostawienie DOM w stanie zgodnym z poglądem
Powodem, dla którego ta odpowiedź jest poprawna, jest to, że jest ona minimalna i kompletna oraz, podobnie jak elementy wewnętrzne produktów Adobe lub innych dobrze zaprojektowanych edytorów graficznych, pozostawia wewnętrzną reprezentację w stanie zgodnym z widokiem utworzonym przez renderowanie.
Podejście alternatywne, ale ograniczone
Innym powszechnie stosowanym podejściem jest użycie indeksu z CSS w połączeniu z wieloma fragmentami dokumentów SVG (tagami SVG) z przeważnie przezroczystymi tłami we wszystkich poza dolnym. Ponownie, podważa to elegancję modelu renderowania SVG, utrudniając przesuwanie obiektów w górę lub w dół w kolejności z.
UWAGI:
źródło
Mamy już 2019 rok i
z-index
nadal nie jest obsługiwany w SVG.Możesz zobaczyć na stronie wsparcie SVG2 w Mozilli , dla którego stan
z-index
- Nie zaimplementowano .Możesz także zobaczyć na stronie Bug 360148 „Obsługa właściwości 'z-index' w elementach SVG” (zgłoszono: 12 lat temu).
Ale masz 3 możliwości w SVG, aby to ustawić:
element.appendChild(aChild);
parentNode.insertBefore(newNode, referenceNode);
targetElement.insertAdjacentElement(positionStr, newElement);
(brak wsparcia w IE dla SVG)Interaktywny przykład demo
Z tymi wszystkimi 3 funkcjami.
źródło
Wciśnij element SVG do końca, tak aby jego indeks Z był na górze. W SVG nie ma właściwości zwanej indeksem z. spróbuj poniżej javascript, aby przenieść element na górę.
Cel: jest elementem, dla którego musimy go przenieść na górę svg: Czy kontener elementów
źródło
łatwo to zrobić:
źródło