web-dev-qa-db-fra.com

SVG réorganise z-index (Raphael optionnel)

Comment puis-je réorganiser Raphael ou ses éléments SVG sous-jacents après la création ... Mieux encore, existe-t-il quelque chose de similaire aux calques en SVG?

Idéalement, j'aimerais deux couches ou plus dans lesquelles placer des éléments à tout moment. Un fond et un calque de premier plan. Si ce n'est pas une option, ajouter des éléments à l'avant conviendrait, et le pousser vers l'arrière serait préférable dans ce cas particulier.

Merci,

javascriptsvgraphael
67
Miles

Donne-moi le 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);

Dans Raphael en particulier, c'est encore plus facile en utilisant toBack() et toFront() :

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

Détails

SVG utilise un "modèle de peintres" pour dessiner des objets: les éléments qui apparaissent plus tard dans le document sont dessinés après (au-dessus) des éléments qui apparaissent plus tôt dans le document. Pour changer la mise en couches des éléments, vous devez réorganiser les éléments dans le DOM en utilisant appendChild ou insertBefore ou similaire.

Vous pouvez voir un exemple de ceci ici: http://phrogz.net/SVG/drag_under_transformation.xhtml

  1. Faites glisser les objets rouges et bleus pour qu'ils se chevauchent.
  2. Cliquez sur chaque objet et regardez-le apparaître en haut. (Les cercles jaunes sont destinés à être toujours visibles, cependant.)

La réorganisation des éléments sur cet exemple est effectuée aux lignes 93/94 du code source:

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

Lorsque la souris est enfoncée sur un élément, il est déplacé pour être le dernier élément de tous ses frères et soeurs, ce qui lui permet de dessiner en dernier, "au-dessus" de tous les autres.

92
Phrogz

Si vous utilisez Raphael, il est très simple de faire apparaître des éléments en avant et en arrière:

element.toBack()
element.toFront()

Voici la documentation pertinente .

40
Herman Schaaf

Il n'y a pas d'index z dans SVG, les objets qui sont plus tard dans le code apparaissent au-dessus des premiers. Donc, pour vos besoins, vous pouvez déplacer le nœud au début ou à la fin de l’arbre.

L'élément <g> (group) est un conteneur générique dans svg. Ils peuvent donc être des calques pour vous. Il suffit de déplacer des nœuds entre les groupes pour obtenir ce dont vous avez besoin.

4
Spadar Shut

Je ne l’ai pas encore essayé mais SVG rend l’ordre on dirait que cela pourrait être une solution. Et aussi 'z-index' arrive, il est déjà dans proposition

0
sgimeno

Si vous prédéfinissez vos objets graphiques, vous pouvez les superposer dans différents ordres au fil du temps:

<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