SVG re-commande z-index (Raphaël facultatif)

Question

Comment puis-je réorganiser Raphaël ou de leurs sous-jacents éléments SVG après la création. Mieux encore, faire quelque chose comme les couches existent en SVG?

Idéalement, je voudrais deux ou plus de deux couches, dans lequel placer les éléments à tout moment; Un fond et une couche de premier plan. Si ce n'est pas une option, popping éléments à l'avant serait ok, et en le poussant vers l'arrière serait mieux dans ce cas particulier.

Merci,

Answer 1

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

Au sein de Raphaël en particulier, c'est même 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 "peintres"de modèle lors de l'élaboration des objets: les objets qui apparaissent plus tard dans le document sont tirées après (sur le dessus) des éléments qui apparaissent plus tôt dans le document. Pour modifier l'ordre d'apparition des éléments, vous devez réorganiser les éléments dans le DOM, à l'aide de appendChild ou insertBefore ou similaires.

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

1. Faites glisser le rouge et le bleu des objets de sorte qu'ils se chevauchent.
2. Cliquez sur chaque objet et de le regarder pop vers le haut. (Les cercles jaunes sont destinés à être toujours visible, cependant.)

La réorganisation des éléments sur cet exemple est fait par les lignes 93/94 du code source:

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

Lorsque la souris est poussé vers le bas sur un élément, il est déplacé à être le dernier élément de l'ensemble de ses frères et sœurs, à l'origine pour dessiner dernier, "au dessus" de tous les autres.

Answer 2

Si vous êtes à l'aide de Raphaël, popping éléments en arrière et en avant est très simple:

element.toBack()
element.toFront()

Voici la documentation pertinente.

Answer 3

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

<g> (groupe) de l'élément est un conteneur générique en svg, de sorte qu'ils peuvent être des couches pour vous. Il suffit de déplacer les noeuds entre les groupes pour réaliser ce dont vous avez besoin.

Answer 4

En fait, je pense que appendChild() seront les seuls à copier l'élément, et pas seulement se déplacer . Cela peut ne pas être un problème, mais si vous voulez éviter les doublons, je suggère quelque chose comme ceci:

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