Wie verwende ich den Z-Index in SVG-Elementen?

154

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 gTag, 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.

Karthi Keyan
quelle

Antworten:

163

Spezifikation

In der SVG-Spezifikation Version 1.1 basiert die Renderreihenfolge auf der Dokumentreihenfolge:

first element -> "painted" first

Verweis auf die SVG 1.1. Spezifikation

3.3 Rendering Order

Elemente in einem SVG-Dokumentfragment haben eine implizite Zeichenreihenfolge, wobei die ersten Elemente im SVG-Dokumentfragment zuerst "gemalt" werden . Nachfolgende Elemente werden auf zuvor gemalte Elemente gemalt.


Lösung (sauberer-schneller)

Sie sollten den grünen Kreis als das letzte zu zeichnende Objekt setzen. Tauschen Sie also die beiden Elemente aus.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="30 70 160 120"> 
   <!-- First draw the orange circle -->
   <circle fill="orange" cx="100" cy="95" r="20"/> 

   <!-- Then draw the green circle over the current canvas -->
   <circle fill="green" cx="100" cy="105" r="20"/> 
</svg>

Hier die Gabel Ihrer jsFiddle .

Lösung (Alternative)

Das Tag usemit dem Attribut xlink:hrefund 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 .

Zweck:

Um zu vermeiden, dass Autoren das Dokument, auf das verwiesen wird, ändern müssen, um dem Stammelement eine ID hinzuzufügen.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="30 70 160 120">
    <!-- First draw the green circle -->
    <circle id="one" fill="green" cx="100" cy="105" r="20" />
    
    <!-- Then draw the orange circle over the current canvas -->
    <circle id="two" fill="orange" cx="100" cy="95" r="20" />
    
    <!-- Finally draw again the green circle over the current canvas -->
    <use xlink:href="#one"/>
</svg>


Hinweise zu SVG 2

Die SVG 2-Spezifikation ist die nächste Hauptversion und unterstützt weiterhin die oben genannten Funktionen.

3.4. Renderauftrag

Elemente in SVG sind dreidimensional positioniert. Zusätzlich zu ihrer Position auf der x- und y-Achse des SVG-Ansichtsfensters werden SVG-Elemente auch auf der z-Achse positioniert. Die Position auf der Z-Achse definiert die Reihenfolge, in der sie gemalt werden .

Entlang der z-Achse werden Elemente in Stapelkontexten gruppiert.

3.4.1. Einrichten eines Stapelkontexts in SVG

...

Stapelkontexte sind konzeptionelle Werkzeuge, mit denen die Reihenfolge beschrieben wird, in der Elemente beim Rendern des Dokuments übereinander gezeichnet werden müssen.

Maicolpt
quelle
Es gibt auch einen alten Entwurf zum Überschreiben der Renderreihenfolge, der jedoch nicht verfügbar ist. Referenzentwurf
Maicolpt
12
Huch! Es ist nicht immer einfach, die Elemente in der Reihenfolge zu zeichnen, in der sie gezeichnet werden sollen, insbesondere wenn die Objekte programmgesteuert generiert werden und verschachtelt erscheinen (z. B. scheint es, dass g a, b nicht enthalten kann, sodass a unter g Geschwister liegt c aber b ist darüber)
Michael
@Michael: In deinem Szenario werde ich zuerst versuchen zu verstehen, ob die Elemente wirklich gruppiert werden müssen.
Maicolpt
1
Das 'use xlink: href' ist cool und komisch und perfekt für das, was ich brauche !!
Ian
32

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

var circles = d3.selectAll('circle')
var label = d3.select('svg').append('text')
    .attr('transform', 'translate(' + [5,100] + ')')

var zOrders = {
    IDs: circles[0].map(function(cv){ return cv.id; }),
    xPos: circles[0].map(function(cv){ return cv.cx.baseVal.value; }),
    yPos: circles[0].map(function(cv){ return cv.cy.baseVal.value; }),
    radii: circles[0].map(function(cv){ return cv.r.baseVal.value; }),
    customOrder: [3, 4, 1, 2, 5]
}

var setOrderBy = 'IDs';
var setOrder = d3.descending;

label.text(setOrderBy);
circles.data(zOrders[setOrderBy])
circles.sort(setOrder);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 100"> 
  <circle id="1" fill="green" cx="50" cy="40" r="20"/> 
  <circle id="2" fill="orange" cx="60" cy="50" r="18"/>
  <circle id="3" fill="red" cx="40" cy="55" r="10"/> 
  <circle id="4" fill="blue" cx="70" cy="20" r="30"/> 
  <circle id="5" fill="pink" cx="35" cy="20" r="15"/> 
</svg>

Die Grundidee ist:

  1. Verwenden Sie D3, um die SVG-DOM-Elemente auszuwählen.

    var circles = d3.selectAll('circle')
  2. 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.

    var zOrders = {
        IDs: circles[0].map(function(cv){ return cv.id; }),
        xPos: circles[0].map(function(cv){ return cv.cx.baseVal.value; }),
        yPos: circles[0].map(function(cv){ return cv.cy.baseVal.value; }),
        radii: circles[0].map(function(cv){ return cv.r.baseVal.value; }),
        customOrder: [3, 4, 1, 2, 5]
    }
  3. Verwenden Sie dann D3, um Ihre Z-Indizes an diese Auswahl zu binden.

    circles.data(zOrders[setOrderBy]);
  4. Rufen Sie zuletzt D3.sort auf, um die Elemente im DOM basierend auf den Daten neu zu ordnen.

    circles.sort(setOrder);

Beispiele

Geben Sie hier die Bildbeschreibung ein

  • Sie können nach ID stapeln

Geben Sie hier die Bildbeschreibung ein

  • Mit SVG ganz links oben

Geben Sie hier die Bildbeschreibung ein

  • Kleinste Radien oben

Geben Sie hier die Bildbeschreibung ein

  • Oder Geben Sie ein Array an, um den Z-Index für eine bestimmte Reihenfolge anzuwenden. In meinem Beispielcode [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...

Steve Ladavich
quelle
Auf jeden Fall die beste Antwort hier ... 10/10. Warum wird das jetzt akzeptiert?
Tigerrrrr
1
@Tigerrrrrr Das Importieren einer externen Bibliothek, um etwas so Einfaches wie das Steuern der Stapelreihenfolge zu tun, ist Wahnsinn. Um es noch schlimmer zu machen, ist D3 eine besonders große Bibliothek.
Ich bin
2
@iMe, gut gesagt. Dies ist zwar eine Lösung für ein Problem, aber es lohnt sich, hier zu sein. es ist nicht und sollte niemals die Antwort sein. Das einzige, was jemals die aktuelle Antwort ersetzen sollte, wäre, wenn eine neuere Spezifikation herauskommt und sich die Browser ändern. Wenn Sie diese Antwort verwenden möchten, importieren Sie nicht alle D3-Dateien, sondern nur die benötigten Module. Importieren Sie nicht alle D3 nur dafür.
Steve Ladavich
31

Versuchen Sie zu invertieren #oneund #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

Lucas Willems
quelle
1
Danke, aber ich muss dem Element den Z-Index-Wert geben.
Karthi Keyan
OK. Und du willst, dass #one auf #two ist oder das Gegenteil?
Lucas Willems
ya wenn ich sagte, dass der Z-Index-Wert -1 für #one bedeutet, wird er auf der obersten Ebene angezeigt.
Karthi Keyan
10
In keiner der SVG-Spezifikationen gibt es eine Z-Index-Eigenschaft. Die einzige Möglichkeit zu definieren, welche Elemente oben und welche unten
angezeigt werden,
9
d3.selection.prototype.moveToFront = function() { return this.each(function() { this.parentNode.appendChild(this); }); };Und dann kann man sagen selection.moveToFront()über stackoverflow.com/questions/14167863/...
MB21
21

Sie können verwenden .

<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>
    <use xlink:href="#one" />
</svg>

Der grüne Kreis erscheint oben.
jsFiddle

Jose Rui Santos
quelle
4
Zeichnet dies zweimal #one?
Mareoraft
@mareoraft Ja, #onewird zweimal gezogen. Wenn Sie möchten, können Sie die erste Instanz über CSS ausblenden. usehat den gleichen Effekt wie das Klonen des verwiesenen DOM-Elements
Jose Rui Santos
+1, weil es kein Javascript benötigt, aber -1, weil Sie auch die Reihenfolge der <g>selbst ändern können, wenn Sie das DOM vor dem Laden ändern.
Hafenkranich
14

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.

function bringToTop(targetElement){
  // put the element at the bottom of its parent
  let parent = targetElement.parentNode;
  parent.appendChild(targetElement);
}

// then just pass through the element you wish to bring to the top
bringToTop(document.getElementById("one"));

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.

function bringToTopofSVG(targetElement){
  let parent = targetElement.ownerSVGElement;
  parent.appendChild(targetElement);
}

Eine nette Funktion von SVGs ist, dass jedes Element seine Position enthält, unabhängig davon, in welcher Gruppe es verschachtelt ist: +1:

Bumsoverboard
quelle
Hallo, das hat bei mir funktioniert, aber was wäre das Äquivalent "auf den Grund bringen"? Vielen Dank
Gavin
@ gavin SVG-Elemente werden in der Reihenfolge von oben nach unten gezeichnet. Um ein Element oben zu platzieren, fügen wir es an () an, sodass es das letzte Element ist. Wenn wir dagegen möchten, dass ein Element nach unten gesendet wird, platzieren wir es mit prepend () als erstes Element. Funktion bringToBottomofSVG (targetElement) {let parent = targetElement.ownerSVGElement; parent.prepend (targetElement); }
Bumsoverboard
13

Verwenden von D3:

Wenn Sie jedes ausgewählte Element der Reihe nach als letztes untergeordnetes Element seines übergeordneten Elements erneut einfügen möchten.

selection.raise()
Diso
quelle
5
selection.raise()ist neu in D3 ab v4.
Tephyr
9

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:

function moveUp(thisObject){
    thisObject.appendTo(thisObject.parents('svg>g'));
}

Verwendung:

moveUp($('#myTopElement'));

Verwenden von D3.js:

d3.selection.prototype.moveUp = function() {
    return this.each(function() {
        this.parentNode.appendChild(this);
    });
};

Verwendung:

myTopElement.moveUp();

Hafenkranich
quelle
es ist jetzt 2019, ist das noch wahr? Als SVG 2.0 in modernen Browsern Akzeptanz fand?
Andrew S
4

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.

z-index = z-index_of_svg_tag + depth_first_tree_index / tree_node_qty

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.

  • parent.removeChild (Kind)
  • parent.insertBefore (child, childRef)

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 .

parent.insertBefore(parent.removeChild(gRobot), gDoorway)

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.

parent.insertBefore(parent.removeChild(gRobot), gDoorway.nextSibling())

Denken Sie nur an a = a und b = b, um sich daran zu erinnern.

insert after = move above
insert before = move below

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:

  1. ( https://www.w3.org/TR/SVG/render.html v 1.1, 2. Ausgabe, 16. August 2011)

    3.3 Renderreihenfolge Elemente in einem SVG-Dokumentfragment haben eine implizite Zeichenreihenfolge, wobei die ersten Elemente im SVG-Dokumentfragment zuerst "gemalt" werden. Nachfolgende Elemente werden auf zuvor gemalte Elemente gemalt.

    3.4 Wie Gruppen gerendert werden Gruppierungselemente wie das Element 'g' (siehe Containerelemente) bewirken, dass eine temporäre separate Leinwand erstellt wird, die auf transparentes Schwarz initialisiert ist und auf die untergeordnete Elemente gezeichnet werden. Nach Abschluss der Gruppe werden alle für die Gruppe angegebenen Filtereffekte angewendet, um eine geänderte temporäre Zeichenfläche zu erstellen. Die geänderte temporäre Zeichenfläche wird im Hintergrund zusammengesetzt, wobei alle Maskierungs- und Deckkrafteinstellungen auf Gruppenebene für die Gruppe berücksichtigt werden.

Douglas Daseeco
quelle
4

Wir haben bereits 2019 und werden z-indexin 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:

  1. Mit element.appendChild(aChild);
  2. Mit parentNode.insertBefore(newNode, referenceNode);
  3. Mit targetElement.insertAdjacentElement(positionStr, newElement);(Keine Unterstützung im IE für SVG)

Beispiel für eine interaktive Demo

Mit all diesen 3 Funktionen.

var state = 0,
    index = 100;

document.onclick = function(e)
{
    if(e.target.getAttribute('class') == 'clickable')
    {
        var parent = e.target.parentNode;

        if(state == 0)
            parent.appendChild(e.target);
        else if(state == 1)
            parent.insertBefore(e.target, null); //null - adds it on the end
        else if(state == 2)
            parent.insertAdjacentElement('beforeend', e.target);
        else
            e.target.style.zIndex = index++;
    }
};

if(!document.querySelector('svg').insertAdjacentElement)
{
    var label = document.querySelectorAll('label')[2];
    label.setAttribute('disabled','disabled');
    label.style.color = '#aaa';
    label.style.background = '#eee';
    label.style.cursor = 'not-allowed';
    label.title = 'This function is not supported in SVG for your browser.';
}
label{background:#cef;padding:5px;cursor:pointer}
.clickable{cursor:pointer}
With: 
<label><input type="radio" name="check" onclick="state=0" checked/>appendChild()</label>
<label><input type="radio" name="check" onclick="state=1"/>insertBefore()</label><br><br>
<label><input type="radio" name="check" onclick="state=2"/>insertAdjacentElement()</label>
<label><input type="radio" name="check" onclick="state=3"/>Try it with z-index</label>
<br>
<svg width="150" height="150" viewBox="0 0 150 150">
    <g stroke="none">
        <rect id="i1" class="clickable" x="10" y="10" width="50" height="50" fill="#80f"/>
        <rect id="i2" class="clickable" x="40" y="40" width="50" height="50" fill="#8f0"/>
        <rect id="i3" class="clickable" x="70" y="70" width="50" height="50" fill="#08f"/>
    </g>
</svg>

Bharata
quelle
2

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.

var Target = document.getElementById(event.currentTarget.id);
var svg = document.getElementById("SVGEditor");
svg.insertBefore(Target, svg.lastChild.nextSibling);

Ziel: Ist ein Element, für das wir es nach oben bringen müssen. Svg: Ist der Container mit Elementen

Vaseem AbdulSamad
quelle
0

es ist einfach, es zu tun:

  1. Klonen Sie Ihre Artikel
  2. geklonte Gegenstände sortieren
  3. Ersetzen Sie Elemente durch geklont

function rebuildElementsOrder( selector, orderAttr, sortFnCallback ) {
	let $items = $(selector);
	let $cloned = $items.clone();
	
	$cloned.sort(sortFnCallback != null ? sortFnCallback : function(a,b) {
  		let i0 = a.getAttribute(orderAttr)?parseInt(a.getAttribute(orderAttr)):0,
  		    i1 = b.getAttribute(orderAttr)?parseInt(b.getAttribute(orderAttr)):0;
  		return i0 > i1?1:-1;
	});

        $items.each(function(i, e){
            e.replaceWith($cloned[i]);
	})
}

$('use[order]').click(function() {
    rebuildElementsOrder('use[order]', 'order');

    /* you can use z-index property for inline css declaration
    ** getComputedStyle always return "auto" in both Internal and External CSS decl [tested in chrome]
    
    rebuildElementsOrder( 'use[order]', null, function(a, b) {
        let i0 = a.style.zIndex?parseInt(a.style.zIndex):0,
  		    i1 = b.style.zIndex?parseInt(b.style.zIndex):0;
  		return i0 > i1?1:-1;
    });
    */
});
use[order] {
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="keybContainer" viewBox="0 0 150 150" xml:space="preserve">
<defs>
    <symbol id="sym-cr" preserveAspectRatio="xMidYMid meet" viewBox="0 0 60 60">
        <circle cx="30" cy="30" r="30" />
        <text x="30" y="30" text-anchor="middle" font-size="0.45em" fill="white">
            <tspan dy="0.2em">Click to reorder</tspan>
        </text>
    </symbol>
</defs>
    <use order="1" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sym-cr" x="0" y="0" width="60" height="60" style="fill: #ff9700; z-index: 1;"></use>
    <use order="4" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sym-cr" x="50" y="20" width="50" height="50" style="fill: #0D47A1; z-index: 4;"></use>
    <use order="5" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sym-cr" x="15" y="30" width="50" height="40" style="fill: #9E9E9E; z-index: 5;"></use>
    <use order="3" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sym-cr" x="25" y="30" width="80" height="80" style="fill: #D1E163; z-index: 3;"></use>
    <use order="2" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sym-cr" x="30" y="0" width="50" height="70" style="fill: #00BCD4; z-index: 2;"></use>
    <use order="0" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sym-cr" x="5" y="5" width="100" height="100" style="fill: #E91E63; z-index: 0;"></use>
</svg>

tdjprog
quelle