Nasıl oluşturulduktan sonra Raphael veya alttaki SVG elemanları sipariş edebilirim. Daha da iyisi, bir şey katmanları SVG var gibi?

İdeal olan herhangi bir zamanda öğeleri yerleştirmek için iki veya daha fazla katman; arka plan ve ön plan katmanı istiyorum. Eğer bu bir seçenek değilse, ön elemanları haşhaş Tamam olur, ve geri iterek bu durumda daha iyi olurdu.

Teşekkürler

Kodu bana ver!

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

Raphael içinde özellikle toBack() toFront() kullanarak daha kolay:

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

Ayrıntılar

SVG nesneleri çizerken "painters model" kullanır: bu belgenin önceki bölümlerinde görünür görünür daha sonra belge (üst) unsurlar sonra çizilmiş öğeleri. Öğeleri katman değiştirmek için, Yeniden Sipariş DOM elemanları, appendChild insertBefore kullanarak veya benzeri.

Bunun bir örneği burada görebilirsiniz: http://phrogz.net/SVG/drag_under_transformation.xhtml

1. Onlar üst üste gelecek şekilde kırmızı ve mavi nesneleri sürükleyin.
2. Her tıklayın zirveye pop nesne ve seyret. (Sarı Daire her zaman görülebilir, ancak olması için tasarlanmıştır.)

Bu örnek üzerinde Yeniden Sipariş öğeleri kaynak kod satırları 93/94 tarafından yapılır:

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

Fare bir öğe üzerinde aşağı itti zaman, tüm kardeş son öğesi, son çıkarmalarına neden, "" tüm insanlar. üstünde taşınır