SVG-переупорядочение z-индекса (опция Рафаэля)

Как я могу переупорядочить Raphael или их базовые элементы SVG после создания. Еще лучше сделать что-то вроде слоев в SVG?

В идеале я хотел бы добавить два или более слоя, в которые можно было бы поместить элементы в любое время; Фон и слой переднего плана. Если это не вариант, то всплывающие элементы на передней панели были бы в порядке, и в этом конкретном случае было бы лучше нажать на спину.

Спасибо,

Ответы

Ответ 1

Сдайте код!

// 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 это проще, используя toBack() и toFront():

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

Подробнее

SVG использует "модель художников" при рисовании объектов: элементы, которые появляются позже в документе, рисуются после (поверх) элементов, которые появляются ранее в документе, Чтобы изменить разбиение элементов, вы должны переупорядочить элементы в DOM, используя appendChild или insertBefore или тому подобное.

Здесь вы можете увидеть пример: http://phrogz.net/SVG/drag_under_transformation.xhtml

  • Перетащите красные и синие объекты, чтобы они перекрывались.
  • Нажмите на каждый объект и посмотрите, как он выталкивается вверх. (Однако желтые круги всегда должны быть видны.)

Переупорядочение элементов в этом примере выполняется строками 93/94 исходного кода:

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

Когда мышь нажимается на элемент, он перемещается в качестве последнего элемента всех его братьев и сестер, заставляя его нарисовать последний, "сверху" всех остальных.

Ответ 3

В SVG нет z-индекса, объекты, которые в конце кода появляются выше первых. Поэтому для ваших нужд вы можете переместить node в начало дерева или его конец.

Элемент

<g> (group) является общим контейнером в svg, поэтому они могут быть для вас слоями. Просто переместите узлы между группами, чтобы достичь того, что вам нужно.

Ответ 4

Если вы предопределяете свои графические объекты, вы можете сложить их в разных порядках по мере развития времени:

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

Ответ 5

Я еще не пробовал, но Порядок визуализации SVG выглядит так, будто это может быть решение. А также "z-index" подходит, он уже находится в proposal

Ответ 6

Собственно, я думаю, что только appendChild() будет копировать элемент, а не просто перемещать его. Это может быть не проблема, но если вы хотите избежать дубликатов, я предлагаю что-то вроде этого:

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