svg 내에서 그려주는 부분인 g의 z-index를 사용할수있을까요 채택완료

아래소스와 같은 구조로 이루어진 소스인데...
3번이 1번 밑쪽으로 그려져야하는데....z-index같은것을 이용하여 밑으로 보낼수있는 방법이있을까요 ?


<svg>
 <g class="1"></g>
<g class="2"></g>
<g class="3"></g>
</svg>

답변 2개

채택된 답변
+20 포인트

use 를 사용하여 마지막에 다시 복사하는 식으로 하여 처리하면 될것 같습니다

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

이런 방법도 있을거 같은데 참고를 해보시겠어요~

 

<svg id="mySvg">
  <g class="1">
    <!-- 1번 요소의 내용 -->
  </g>
  <g class="2">
    <!-- 2번 요소의 내용 -->
  </g>
  <g class="3">
    <!-- 3번 요소의 내용 -->
  </g>
</svg>

<script>
  const svg = document.getElementById('mySvg');
  const g3 = svg.querySelector('g.class3');
  svg.insertBefore(g3, svg.firstChild); // 3번 요소를 첫 번째 요소로 이동
</script>
 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고