[javascript] svg 요소에서 z-index를 사용하는 방법은 무엇입니까?

다른 사람들이 말했듯이 z-index는 요소가 DOM에 나타나는 순서로 정의됩니다. HTML을 수동으로 재정렬하는 것이 옵션이 아니거나 어려운 경우 D3을 사용하여 SVG 그룹 / 객체를 재정렬 할 수 있습니다.

D3을 사용하여 DOM 순서 업데이트 및 Z- 인덱스 기능 모방

D3를 사용하여 SVG 요소 Z- 인덱스 업데이트

가장 기본적인 수준에서 (그리고 다른 용도로 ID를 사용하지 않는 경우) 요소 ID를 z- 인덱스의 독립형으로 사용하고 다시 정렬 할 수 있습니다. 그 너머로 상상력을 크게 발휘할 수 있습니다.

코드 스 니펫의 예

var circles = d3.selectAll('circle')
var label = d3.select('svg').append('text')
    .attr('transform', 'translate(' + [5,100] + ')')

var zOrders = {
    IDs: circles[0].map(function(cv){ return cv.id; }),
    xPos: circles[0].map(function(cv){ return cv.cx.baseVal.value; }),
    yPos: circles[0].map(function(cv){ return cv.cy.baseVal.value; }),
    radii: circles[0].map(function(cv){ return cv.r.baseVal.value; }),
    customOrder: [3, 4, 1, 2, 5]
}

var setOrderBy = 'IDs';
var setOrder = d3.descending;

label.text(setOrderBy);
circles.data(zOrders[setOrderBy])
circles.sort(setOrder);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 100"> 
  <circle id="1" fill="green" cx="50" cy="40" r="20"/> 
  <circle id="2" fill="orange" cx="60" cy="50" r="18"/>
  <circle id="3" fill="red" cx="40" cy="55" r="10"/> 
  <circle id="4" fill="blue" cx="70" cy="20" r="30"/> 
  <circle id="5" fill="pink" cx="35" cy="20" r="15"/> 
</svg>

기본 아이디어는 다음과 같습니다.

1. D3을 사용하여 SVG DOM 요소를 선택하십시오.

   var circles = d3.selectAll('circle')

2. SVG 요소와의 1 : 1 관계로 재정렬하려는 일부 z- 인디언스 배열을 만듭니다. 아래 예에서 사용 된 Z- 인덱스 배열은 ID, x & y 위치, 반지름 등입니다.

   var zOrders = {
       IDs: circles[0].map(function(cv){ return cv.id; }),
       xPos: circles[0].map(function(cv){ return cv.cx.baseVal.value; }),
       yPos: circles[0].map(function(cv){ return cv.cy.baseVal.value; }),
       radii: circles[0].map(function(cv){ return cv.r.baseVal.value; }),
       customOrder: [3, 4, 1, 2, 5]
   }
   

3. 그런 다음 D3을 사용하여 z- 표시를 해당 선택에 바인딩하십시오.

   circles.data(zOrders[setOrderBy]);

4. 마지막으로 D3.sort를 호출하여 데이터를 기반으로 DOM의 요소를 재정렬합니다.

   circles.sort(setOrder);

예

• ID로 쌓을 수 있습니다

• 가장 왼쪽에 SVG가있는 상태

• 가장 작은 반지름

• 또는 특정 순서에 대해 z-index를 적용 할 배열을 지정하십시오. 예제 코드에서 배열 [3,4,1,2,5]은 DOM에서 1 번째, 4 번째에서 2 번째, 1 번째에서 3 번째로 (원래 HTML 순서로) 3 번째 원을 이동 / 재주문합니다. , 등등…

답변

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 120">
    <g>
        <g id="one">
            <circle fill="green" cx="100" cy="105" r="20" />
        </g>
        <g id="two">
            <circle fill="orange" cx="100" cy="95" r="20" />
        </g>
    </g>
    <use xlink:href="#one" />
</svg>

function bringToTop(targetElement){
  // put the element at the bottom of its parent
  let parent = targetElement.parentNode;
  parent.appendChild(targetElement);
}

// then just pass through the element you wish to bring to the top
bringToTop(document.getElementById("one"));

function bringToTopofSVG(targetElement){
  let parent = targetElement.ownerSVGElement;
  parent.appendChild(targetElement);
}

selection.raise()

function moveUp(thisObject){
    thisObject.appendTo(thisObject.parents('svg>g'));
}

moveUp($('#myTopElement'));

d3.selection.prototype.moveUp = function() {
    return this.each(function() {
        this.parentNode.appendChild(this);
    });
};

myTopElement.moveUp();