webentwicklung-frage-antwort-db.com.de

SVG-Neuordnung des Z-Index (optional Raffael)

Wie kann ich Raphael oder die zugrundeliegenden SVG-Elemente nach der Erstellung neu ordnen ..__ Besser noch, gibt es in SVG so etwas wie Ebenen?

Idealerweise möchte ich zwei oder mehr Schichten, in denen Elemente jederzeit platziert werden können. Eine Hintergrund- und eine Vordergrundebene. Wenn dies keine Option ist, wäre das Platzieren von Elementen nach vorne in Ordnung, und ein Zurückschieben nach hinten wäre in diesem Fall besser.

Vielen Dank,

67
Miles

Gib mir den Code!

// move element "on top of" all others within the same grouping
el.parentNode.appendChild(el); 

// move element "underneath" all others within the same grouping
el.parentNode.insertBefore(el,el.parentNode.firstChild);

// move element "on top of" all others in the entire document
el.ownerSVGElement.appendChild(el); 

// move element "underneath" all others in the entire document
el.ownerSVGElement.appendChild(el,el.ownerSVGElement.firstChild); 

In Raphael speziell ist es noch einfacher mit toBack() und toFront() :

raphElement.toBack()  // Move this element below/behind all others
raphElement.toFront() // Move this element above/in front of all others

Einzelheiten

SVG verwendet ein "Malermodell" beim Zeichnen von Objekten: Elemente, die später im Dokument angezeigt werden, werden nach (über) Elementen gezeichnet, die zuvor im Dokument angezeigt wurden. Um die Schichtung von Elementen zu ändern, müssen Sie die Elemente im DOM unter Verwendung von appendChild oder insertBefore oder ähnlich sortieren.

Ein Beispiel hierfür finden Sie hier: http://phrogz.net/SVG/drag_under_transformation.xhtml

  1. Ziehen Sie die roten und blauen Objekte so, dass sie sich überlappen.
  2. Klicken Sie auf jedes Objekt und sehen Sie, wie es nach oben springt. (Die gelben Kreise sollen jedoch immer sichtbar sein.)

Die Neuordnung der Elemente in diesem Beispiel erfolgt über die Zeilen 93/94 des Quellcodes:

el.addEventListener('mousedown',function(e){
  el.parentNode.appendChild(el); // move to top
  ...
},false);

Wenn die Maus auf ein Element gedrückt wird, wird es als letztes Element aller seiner Geschwister verschoben, wodurch es zuletzt als "über alle anderen" gezeichnet wird.

92
Phrogz

Wenn Sie Raphael verwenden, ist das Springen von Elementen vor und zurück sehr einfach:

element.toBack()
element.toFront()

Hier ist die relevante Dokumentation .

40
Herman Schaaf

Es gibt keinen z-Index in SVG. Objekte, die sich später im Code befinden, werden über den ersten angezeigt. Daher können Sie den Knoten für Ihre Anforderungen an den Anfang oder Anfang des Baums verschieben.

Das <g> (group) -Element ist ein generischer Container in svg, also können sie Layer für Sie sein. Verschieben Sie einfach Knoten zwischen den Gruppen, um das zu erreichen, was Sie benötigen.

4
Spadar Shut

Ich habe es noch nicht ausprobiert, aber SVG-Render-Reihenfolge sieht so aus, als könnte es eine Lösung sein. Und auch 'z-index' kommt, ist schon in Vorschlag

0
sgimeno

Wenn Sie Ihre Grafikobjekte vordefinieren, können Sie sie im Laufe der Zeit in verschiedenen Ebenen schichten:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000" width="400" height="400">
  <rect x="0" y="0" width="1000" height="1000" fill="black"/>
  <defs>
    <rect id="a1" x="0"   y="0"   width="500" height="500" fill="red"/>
    <rect id="a2" x="100" y="100" width="500" height="500" fill="blue"/>
  </defs>
  <g> 
    <use xlink:href="#a1"/>
    <use xlink:href="#a2"/>
    <set attributeName="visibility"  to="hidden" begin="2s"/> 
  </g>
  <g visibility="hidden"> 
    <use xlink:href="#a2"/>
    <use xlink:href="#a1"/>
    <set attributeName="visibility"  to="visible" begin="2s"/> 
  </g>
</svg>
0
user846969