Ich benutze die SVG-Kreise in meinem Projekt so,
<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>
Und ich benutze den Z-Index im g
Tag, um die Elemente zuerst anzuzeigen. In meinem Projekt muss ich nur den Z-Index-Wert verwenden, aber ich kann den Z-Index nicht für meine SVG-Elemente verwenden. Ich habe viel gegoogelt, aber relativ nichts gefunden. Bitte helfen Sie mir, den Z-Index in meinem SVG zu verwenden.
Hier ist die DEMO.
javascript
jquery
svg
z-index
Karthi Keyan
quelle
quelle
Antworten:
Spezifikation
In der SVG-Spezifikation Version 1.1 basiert die Renderreihenfolge auf der Dokumentreihenfolge:
Verweis auf die SVG 1.1. Spezifikation
Lösung (sauberer-schneller)
Sie sollten den grünen Kreis als das letzte zu zeichnende Objekt setzen. Tauschen Sie also die beiden Elemente aus.
Hier die Gabel Ihrer jsFiddle .
Lösung (Alternative)
Das Tag
use
mit dem Attributxlink:href
und als Wert die ID des Elements. Denken Sie daran, dass dies möglicherweise nicht die beste Lösung ist, auch wenn das Ergebnis in Ordnung zu sein scheint. Mit etwas Zeit hier der Link der Spezifikation SVG 1.1 "use" Element .Hinweise zu SVG 2
Die SVG 2-Spezifikation ist die nächste Hauptversion und unterstützt weiterhin die oben genannten Funktionen.
quelle
Wie andere hier gesagt haben, wird der Z-Index durch die Reihenfolge definiert, in der das Element im DOM angezeigt wird. Wenn eine manuelle Neuordnung Ihres HTML-Codes keine Option ist oder schwierig wäre, können Sie mit D3 SVG-Gruppen / Objekte neu anordnen.
Verwenden Sie D3, um die DOM-Reihenfolge zu aktualisieren und die Z-Index-Funktionalität nachzuahmen
Aktualisieren des SVG-Element-Z-Index mit D3
Auf der einfachsten Ebene (und wenn Sie keine IDs für andere Zwecke verwenden) können Sie Element-IDs als Ersatz für den Z-Index verwenden und mit diesen neu anordnen. Darüber hinaus können Sie Ihrer Fantasie freien Lauf lassen.
Beispiele im Code-Snippet
Die Grundidee ist:
Verwenden Sie D3, um die SVG-DOM-Elemente auszuwählen.
Erstellen Sie ein Array von Z-Indizes mit einer 1: 1-Beziehung zu Ihren SVG-Elementen (die Sie neu anordnen möchten). In den folgenden Beispielen verwendete Z-Index-Arrays sind IDs, x- und y-Position, Radien usw.
Verwenden Sie dann D3, um Ihre Z-Indizes an diese Auswahl zu binden.
Rufen Sie zuletzt D3.sort auf, um die Elemente im DOM basierend auf den Daten neu zu ordnen.
Beispiele
[3,4,1,2,5]
verschiebt / ordnet das Array den 3. Kreis (in der ursprünglichen HTML-Reihenfolge) als 1. im DOM, als 4. als 2., als 1. als 3. , und so weiter...quelle
Versuchen Sie zu invertieren
#one
und#two
. Schauen Sie sich diese Geige an: http://jsfiddle.net/hu2pk/3/Update
In SVG wird der Z-Index durch die Reihenfolge definiert, in der das Element im Dokument angezeigt wird . Sie können auch auf diese Seite schauen, wenn Sie möchten: https://stackoverflow.com/a/482147/1932751
quelle
d3.selection.prototype.moveToFront = function() { return this.each(function() { this.parentNode.appendChild(this); }); };
Und dann kann man sagenselection.moveToFront()
über stackoverflow.com/questions/14167863/...Sie können verwenden .
Der grüne Kreis erscheint oben.
jsFiddle
quelle
#one
wird zweimal gezogen. Wenn Sie möchten, können Sie die erste Instanz über CSS ausblenden.use
hat den gleichen Effekt wie das Klonen des verwiesenen DOM-Elements<g>
selbst ändern können, wenn Sie das DOM vor dem Laden ändern.Wie bereits erwähnt, rendern svgs in der richtigen Reihenfolge und berücksichtigen den Z-Index (vorerst) nicht. Senden Sie das spezifische Element möglicherweise einfach an den unteren Rand des übergeordneten Elements, damit es zuletzt gerendert wird.
Hat für mich gearbeitet.
Aktualisieren
Wenn Sie eine verschachtelte SVG-Datei mit Gruppen haben, müssen Sie das Element aus dem übergeordneten Knoten entfernen.
Eine nette Funktion von SVGs ist, dass jedes Element seine Position enthält, unabhängig davon, in welcher Gruppe es verschachtelt ist: +1:
quelle
Verwenden von D3:
Wenn Sie jedes ausgewählte Element der Reihe nach als letztes untergeordnetes Element seines übergeordneten Elements erneut einfügen möchten.
quelle
selection.raise()
ist neu in D3 ab v4.Es gibt keinen Z-Index für SVGs. Aber svg bestimmt anhand seiner Position im DOM, welches Ihrer Elemente das oberste ist. Auf diese Weise können Sie das Objekt entfernen und am Ende des SVG platzieren, wodurch es zum "zuletzt gerenderten" Element wird. Dieser wird dann visuell "oben" gerendert.
Verwenden von jQuery:
Verwendung:
Verwenden von D3.js:
Verwendung:
quelle
Verwenden von D3:
Wenn Sie das Element in umgekehrter Reihenfolge zu den Daten hinzufügen möchten, verwenden Sie:
Anstelle von .append
Hinzufügen eines Elements zum Anfang eines Gruppenelements
quelle
Eine andere Lösung wäre die Verwendung von divs, die zIndex verwenden, um die SVG-Elemente zu enthalten. Wie hier: https://stackoverflow.com/a/28904640/4552494
quelle
Die zum Zeitpunkt dieser Antwort veröffentlichten sauberen, schnellen und einfachen Lösungen sind unbefriedigend. Sie basieren auf der fehlerhaften Aussage, dass SVG-Dokumente keine z-Reihenfolge haben. Bibliotheken sind ebenfalls nicht erforderlich. Eine Codezeile kann die meisten Operationen ausführen, um die z-Reihenfolge von Objekten oder Objektgruppen zu ändern, die möglicherweise für die Entwicklung einer App erforderlich sind, die 2D-Objekte in einem xyz-Raum bewegt.
Z-Reihenfolge ist in SVG-Dokumentfragmenten definitiv vorhanden
Was als SVG-Dokumentfragment bezeichnet wird, ist ein Baum von Elementen, die vom Basisknotentyp SVGElement abgeleitet sind. Der Stammknoten eines SVG-Dokumentfragments ist ein SVGSVGElement, das einem HTML5- Tag <svg> entspricht . Das SVGGElement entspricht dem <g> -Tag und ermöglicht das Aggregieren von untergeordneten Elementen .
Ein Z-Index-Attribut auf dem SVGElement wie in CSS würde das SVG-Rendering-Modell zunichte machen. In den Abschnitten 3.3 und 3.4 der W3C-SVG-Empfehlung v1.1, 2. Ausgabe, heißt es, dass SVG-Dokumentfragmente (Bäume von Nachkommen eines SVGSVGElement) mithilfe einer sogenannten Tiefensuche des Baums gerendert werden . Dieses Schema ist in jeder Hinsicht eine Ordnung.
Die Z-Reihenfolge ist eigentlich eine Abkürzung für Computer Vision, um die Notwendigkeit eines echten 3D-Renderings mit den Komplexitäten und Rechenanforderungen der Raytracing-Funktion zu vermeiden. Die lineare Gleichung für den impliziten Z-Index von Elementen in einem SVG-Dokumentfragment.
Dies ist wichtig, da Sie, wenn Sie einen Kreis, der sich unter einem Quadrat befand, nach oben verschieben möchten, einfach das Quadrat vor dem Kreis einfügen. Dies kann einfach in JavaScript durchgeführt werden.
Unterstützende Methoden
SVGElement-Instanzen verfügen über zwei Methoden, die eine einfache und einfache Manipulation der z-Reihenfolge unterstützen.
Die richtige Antwort, die kein Chaos verursacht
Da das SVGGElement ( <g> -Tag) genauso einfach entfernt und eingefügt werden kann wie ein SVGCircleElement oder eine andere Form, können Bildebenen, die für Adobe-Produkte und andere Grafiktools typisch sind, mithilfe des SVGGElement problemlos implementiert werden. Dieses JavaScript ist im Wesentlichen ein Befehl zum Verschieben nach unten .
Wenn die Schicht eines Roboters, die als Kinder von SVGGElement gRobot gezeichnet wurde, vor der Tür war, die als Kinder von SVGGElement gDoorway gezeichnet wurde, befindet sich der Roboter jetzt hinter der Tür, da die z-Reihenfolge der Tür jetzt eins plus die z-Reihenfolge des Roboters ist.
Ein Befehl zum Verschieben nach oben ist fast genauso einfach.
Denken Sie nur an a = a und b = b, um sich daran zu erinnern.
Belassen des DOM in einem Zustand, der mit der Ansicht übereinstimmt
Der Grund, warum diese Antwort richtig ist, liegt darin, dass sie minimal und vollständig ist und wie die Interna von Adobe-Produkten oder anderen gut gestalteten Grafikeditoren die interne Darstellung in einem Zustand belässt, der mit der durch das Rendern erstellten Ansicht übereinstimmt.
Alternativer, aber begrenzter Ansatz
Ein anderer häufig verwendeter Ansatz ist die Verwendung des CSS-Z-Index in Verbindung mit mehreren SVG-Dokumentfragmenten (SVG-Tags) mit größtenteils transparentem Hintergrund in allen außer dem unteren. Dies beeinträchtigt wiederum die Eleganz des SVG-Rendering-Modells und macht es schwierig, Objekte in der z-Reihenfolge nach oben oder unten zu verschieben.
ANMERKUNGEN:
quelle
Wir haben bereits 2019 und werden
z-index
in SVG noch nicht unterstützt.Sie können auf der Website SVG2-Unterstützung in Mozilla sehen, dass der Status für
z-index
- Nicht implementiert .Sie können auch auf der Website den Fehler 360148 "Unterstützung der Eigenschaft 'z-index' für SVG-Elemente" anzeigen (Bericht: vor 12 Jahren).
Sie haben jedoch drei Möglichkeiten in SVG, dies festzulegen:
element.appendChild(aChild);
parentNode.insertBefore(newNode, referenceNode);
targetElement.insertAdjacentElement(positionStr, newElement);
(Keine Unterstützung im IE für SVG)Beispiel für eine interaktive Demo
Mit all diesen 3 Funktionen.
quelle
Schieben Sie das SVG-Element zum Letzten, damit sein Z-Index oben liegt. In SVG gibt es keine Eigenschaft namens z-index. Versuchen Sie unten Javascript, um das Element nach oben zu bringen.
Ziel: Ist ein Element, für das wir es nach oben bringen müssen. Svg: Ist der Container mit Elementen
quelle
es ist einfach, es zu tun:
quelle