SVG z-index di riordino (Raphael optional)

Come posso riordinare Raphael oi suoi elementi SVG sottostanti dopo la creazione. Meglio ancora, fare qualcosa come gli strati esistono in SVG?

Idealmente vorrei due o più strati in cui mettere gli elementi in qualsiasi momento; Uno background e uno strato in primo piano. Se questa non è un'opzione, gli elementi popping sul davanti sarebbero ok, e spingerlo alla schiena sarebbe meglio in questo caso particolare.

Grazie,

Gimme the 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); 

All'interno di Raphael in modo specifico, è ancora più facile usando toBack() e toFront() :

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

Dettagli

SVG utilizza un "model di pittori" quando si disegna oggetti: gli elementi che appaiono più tardi nel documento vengono disegnati dopo gli elementi (sopra l'alto) che appaiono in precedenza nel documento. Per modificare la stratificazione degli elementi, è necessario ordinare nuovamente gli elementi del DOM utilizzando appendChild o appendChild o simili.

Potete vedere un esempio di questo: http://phrogz.net/SVG/drag_under_transformation.xhtml

  1. Trascinare gli oggetti rossi e blu in modo che si sovrappongano.
  2. Fare clic su each object e guardarlo in alto. (I cerchi gialli sono comunque sempre visibili.)

Il riordino di elementi su questo esempio viene eseguito con le righe 93/94 del codice sorgente:

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

Quando il mouse viene spinto verso il basso su un elemento, viene spostato come ultimo elemento di tutti i suoi fratelli, provocandolo a disegnare l'ultimo "in cima" di tutti gli altri.

Se stai utilizzando Raphael, popping elementi avanti e indietro è molto semplice:

 element.toBack() element.toFront() 

Ecco la documentazione pertinente .

Non esiste z-index in SVG, gli oggetti che si trovano successivamente nel codice appaiono sopra i primi. Quindi, per le tue esigenze, puoi spostare il nodo all'inizio dell'tree o alla fine di esso.

<g> elemento <g> (gruppo) è un contenitore generico in svg, in modo che possano essere livelli per voi. Basta spostare i nodes tra i gruppi per get quello che ti serve.

Se si predefinono i tuoi oggetti grafici, è ansible quindi applicarli in diversi ordini in base al tempo che si evolve:

 <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> 

Non l'ho ancora provato, ma l' ordine di rendering SVG sembra che potrebbe essere una soluzione. E anche 'z-index' sta arrivando, è già nella proposta

In realtà, penso che appendChild () da solo copia l'elemento e non solo lo sposta . Questo non può essere un problema, ma se vuoi evitare duplicazioni, suggerisco qualcosa di simile:

 el.parentNode.appendChild(el.parentNode.removeChild(el));