svg 내에서 그려주는 부분인 g의 z-index를 사용할수있을까요
본문
아래소스와 같은 구조로 이루어진 소스인데...
3번이 1번 밑쪽으로 그려져야하는데....z-index같은것을 이용하여 밑으로 보낼수있는 방법이있을까요 ?
<svg>
<g class="1"></g>
<g class="2"></g>
<g class="3"></g>
</svg>
답변 2
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>
답변을 작성하시기 전에 로그인 해주세요.