SVG переупорядочение z-index (Рафаэль необязательно) - PullRequest
Новая
       1

SVG переупорядочение z-index (Рафаэль необязательно)

67 голосов
/ 04 июля 2011

Как я могу изменить порядок Рафаэля или его элементов SVG после создания.А еще лучше, существуют ли что-то вроде слоев в SVG?

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

Спасибо,

Ответы [ 6 ]

93 голосов
/ 05 июля 2011

Дай мне код! 

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

В Рафаэле, в частности, это еще проще, используя 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

  1. Перетащите красные и синие объекты так, чтобы они перекрывались.
  2. Нажмите на каждый объект и наблюдайте, как он всплывает наверх.(Желтые кружки предназначены, чтобы всегда быть видимыми.)

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

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

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

40 голосов
/ 28 октября 2011

Если вы используете Рафаэля, перемещать элементы назад и вперед очень просто: 

element.toBack()
element.toFront()

Вот соответствующая документация .

4 голосов
/ 05 июля 2011

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

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

0 голосов
/ 12 сентября 2013

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

0 голосов
/ 08 сентября 2013

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

<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 голосов
/ 12 мая 2013

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

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