Angenommen, ich habe ein paar zusammengesetzte Formen ( <g>
). Ich möchte in der Lage sein, sie anzuklicken und zu ziehen, aber ich möchte, dass der, den ich gerade ziehe, in der Z-Reihenfolge oben auf dem anderen liegt, so dass, wenn ich ihn über den ANDEREN ziehe, der andere man sollte in den Schatten gestellt werden.
javascript
svg
Corey Trager
quelle
quelle
Antworten:
Der Z-Index in SVG wird durch die Reihenfolge definiert, in der die Elemente im Dokument angezeigt werden. Sie müssen die Elementreihenfolge ändern, wenn Sie eine bestimmte Form nach oben bringen möchten.
quelle
$('#thing-i-want-on-top').appendTo('#my-svg');
Eine Alternative zum Verschieben von Elementen im Baum besteht darin,
<use>
Elemente zu verwenden , bei denen Sie das ändernxlink:href
Attribut so , dass Sie die gewünschte z-Reihenfolge erhalten.Hier ist ein alter Thread auf der Mailingliste von SVG-Entwicklern, in dem dieses Thema im Zusammenhang mit dem Wunsch diskutiert wird, einige Formen zu animieren.
Aktualisieren:
In diesem Beispiel ist das <use> -Element das letzte, wodurch es das vorderste Element ist. Wir können jedes der anderen Elemente als vorderstes Element auswählen, indem wir einfach das
xlink:href
Attribut ändern . Im obigen Beispiel haben wir den Kreis mit ausgewähltid="c1"
, wodurch er als oberstes Element angezeigt wird.Siehe Geige .
quelle
xlink:href
ist veraltet, jetzt ist es nurhref
Das ist eine alte Frage, aber ...
In FireFox (7+) und Chrome (14+) können Sie svg_element nach oben ziehen. Dies gibt Ihnen nicht die Freiheit der vollständigen Steuerung der Z-Achse, aber es ist besser als nichts;)
Fügen Sie dieses Element einfach erneut hinzu.
Ich dachte, es würde einen Irrtum auslösen oder so.
quelle
appendChild
Entfernt zuerst das alte übergeordnete Element, falls vorhanden, auch wenn es mit dem neuen übergeordneten Element identisch ist, und fügt es dann der untergeordneten Liste des neuen übergeordneten Elements hinzu.Eine andere nicht erwähnte Lösung besteht darin, jedes SVG-Element / jeden Satz von Elementen in ein Div zu setzen. Sie können den Z-Index der Divs einfach ändern.
Geige: SVG-Elemente wechseln mit Z-Index für Container
... Drücken Sie die Tasten, um das Element nach vorne zu drücken. (vs das ganze Set neu zu streichen und 1 Element nach vorne zu schieben, aber die ursprüngliche Reihenfolge wie in der akzeptierten Lösung beizubehalten)
Es wäre sehr schön, relative Z-Indizes zu haben ...
stackOverflow möchte, dass ich den Code setze, wenn es sich um einen Link von jsfiddle handelt? ... ook
Code-Snippet anzeigen
quelle
Ja, die Reihenfolge gibt an, welches Objekt sich vor dem anderen befindet. Um die Reihenfolge zu ändern, müssen Sie Dinge über das DOM verschieben. Ein gutes Beispiel dafür finden Sie im SVG-Wiki unter https://www.w3.org/TR/SVG11/render.html#RenderingOrder
quelle
Wenn Sie die Bibliothek svg.js verwenden , können Sie mit dem Befehl ".front ()" jedes Element nach oben verschieben.
quelle
SVG
verwendet ein "Malermodell" des Renderns. Farbe wird in aufeinanderfolgenden Operationen auf das Ausgabegerät aufgetragen, so dass jede Operation über einen bestimmten Bereich des Ausgabegeräts malt. Wenn der Bereich einen zuvor gestrichenen Bereich überlappt, verdeckt die neue Farbe die alte Verbindung teilweise oder vollständigquelle
Um in SVG einen höheren größeren Z-Index zu erhalten, sollten Sie das Element im DOM-Baum nach unten verschieben. Sie können dies mit jQuery tun, indem Sie das SVG-Element auswählen, es entfernen und an der gewünschten Position erneut anhängen:
quelle
Adam Bradleys Kommentar zu Sams Antwort war genau richtig. Es verwendet jQuery anstatt nur CSS, aber er sagte dies:
Für das, was ich erstellt habe, musste sich mein SVG-Pfad beim Schweben über jedem anderen Pfad befinden, aber immer noch unter meinem SVG-Text. Also hier ist, was ich mir ausgedacht habe:
Sowohl appendTo als auch insertBefore verschieben Ihr Element an eine neue Position, sodass Sie die Tiefe des SVG-Elements nach Belieben ändern können.
quelle