SVG 재정렬 Z- 색인 (Raphael 선택 사항)

SVG 재정렬 Z- 색인 (Raphael 선택 사항)

---

생성 후 Raphael 또는 기본 SVG 요소를 어떻게 재정렬 할 수 있습니까? 더 좋은 점은 SVG에 레이어와 같은 것이 있습니까?

이상적으로는 언제든지 요소를 배치 할 두 개 이상의 레이어를 원합니다. 배경 및 전경 레이어. 이것이 옵션이 아니라면 요소를 앞쪽으로 튀기는 것이 괜찮을 것이고,이 특별한 경우에는 뒤쪽으로 밀면 더 좋을 것입니다.

감사,

---

코드 내놔!

// 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는 객체를 그릴 때 "페인터 모델"을 사용 합니다. 문서에서 나중에 나타나는 항목은 문서의 앞부분에 나타나는 요소 (위) 뒤에 그려집니다. 항목의 레이어를 변경하려면 appendChild또는 등을 사용하여 DOM의 요소를 다시 정렬해야합니다 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);

마우스를 요소에서 아래로 누르면 모든 형제의 마지막 요소로 이동하여 다른 모든 요소의 "위"에 마지막으로 그려집니다.

---

Raphael을 사용하는 경우 요소를 앞뒤로 팝하는 것은 매우 간단합니다.

element.toBack()
element.toFront()

다음은 관련 문서 입니다.

---

SVG에는 Z- 색인이 없으며 코드에서 나중에있는 개체가 첫 번째 개체 위에 나타납니다. 따라서 필요에 따라 노드를 트리의 시작 또는 끝으로 이동할 수 있습니다.

<g>(그룹) 요소는 svg의 일반 컨테이너이므로 레이어가 될 수 있습니다. 그룹간에 노드를 이동하여 필요한 것을 얻으십시오.

---

그래픽 개체를 미리 정의한 경우 시간이 지남에 따라 다른 순서로 레이어를 지정할 수 있습니다.

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

---

아직 시도하지 않았지만 SVG 렌더링 순서 가 해결책이 될 수있는 것처럼 보입니다. 그리고 'Z- 인덱스'도 나오고 있습니다. 이미 제안 중입니다.

---

Actually, I think appendChild() alone will copy the element and not just move it. This may not be a problem but if you want to avoid duplicates I suggest something like this:

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

참고URL : https://stackoverflow.com/questions/6566406/svg-re-ordering-z-index-raphael-optional