library examples descargar javascript svg raphael

javascript - examples - raphael js map



SVG reordenando z-index(Raphael opcional) (6)

¿Cómo puedo reorganizar Raphael o sus elementos SVG subyacentes después de la creación? Mejor aún, ¿hay algo así como capas en SVG?

Lo ideal sería que quisiera dos o más capas en las que colocar elementos en cualquier momento; Un fondo y una capa de primer plano. Si eso no es una opción, colocar elementos al frente estaría bien, y presionarlo hacia atrás sería mejor en este caso particular.

Gracias,

Dame el código!

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

Dentro de Raphael específicamente, es incluso más fácil al usar toBack() y toFront() :

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

Detalles

SVG utiliza un "modelo de pintores" al dibujar objetos: los elementos que aparecen más adelante en el documento se dibujan después de (encima de) los elementos que aparecen anteriormente en el documento. Para cambiar las capas de los elementos, debe volver a ordenar los elementos en el DOM, usando appendChild o insertBefore o similar.

Puede ver un ejemplo de esto aquí: http://phrogz.net/SVG/drag_under_transformation.xhtml

  1. Arrastre los objetos rojo y azul para que se superpongan.
  2. Haga clic en cada objeto y mire cómo aparece en la parte superior. (Sin embargo, los círculos amarillos están destinados a ser siempre visibles).

El reordenamiento de elementos en este ejemplo se realiza mediante las líneas 93/94 del código fuente:

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

Cuando se presiona el mouse sobre un elemento, se mueve para que sea el último elemento de todos sus hermanos, lo que hace que dibuje el último, "encima" de todos los demás.

En realidad, creo que appendChild () solo copiará el elemento y no solo lo moverá . Esto puede no ser un problema, pero si quiere evitar duplicados, le sugiero algo como esto:

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

No hay índice Z en SVG, los objetos que están más tarde en el código aparecen encima de los primeros. Entonces, para sus necesidades, puede mover el nodo al comienzo del árbol o al final del mismo.

<g> (grupo) es un contenedor genérico en svg, por lo que pueden ser capas para ti. Simplemente mueva los nodos entre los grupos para lograr lo que necesita.

Si está usando Raphael, hacer estallar elementos hacia atrás y hacia adelante es muy sencillo:

element.toBack() element.toFront()

Aquí está la toBack() .

Si predefine sus objetos gráficos, puede colocarlos en capas en diferentes órdenes a medida que el tiempo evoluciona:

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