SVG Z-index

목차

 

SVG

SVG는 백터로

이미지를 표현하는 태그이다.

<svg version="1.1"
    baseProfile="full"
    width="300px" height="300px"
    xmlns="http://www.w3.org/2000/svg">

    <rect width="100px" height="100px" fill="#440a67" />
    <rect x="50px" y="50px" width="100px" height="100px" fill="#93329e" />
    <rect x="100px" y="100px" width="100px" height="100px" fill="#b4aee8" />
    <rect x="150px" y="150px" width="100px" height="100px" fill="#ffe3fe" />
  </svg>

이런 식으로

html 그리기 Svg / Canvas

정렬순서 변경

그런데 문제는, svg 요소들의 정렬순서를 바꾸고 싶을 때이다.

svg는 정렬순서를 마크업 순서 (코드 순)에 따라 정해지기에, 이를 변경하기 위해선

코드를 재배열하는 수밖에 없다.

 

재배열하는 방법에는 크게 두 가지가 있는데

 

Use태그 쓰기

Use태그는 Svg 자식 요소를 복사하는 태그이다.

복사하고자 하는 태그를 class / id로 명시하고

Use 태그의 href속성 값에 적어주면 된다.

<svg version="1.1"
    baseProfile="full"
    width="300px" height="300px"
    xmlns="http://www.w3.org/2000/svg">

    <rect width="100px" height="100px" fill="#440a67" />
    <circle id="circle" cx="100px" cy="100px" r="50px" fill="#93329e" />
    <rect x="100px" y="100px" width="100px" height="100px" fill="#b4aee8" />
    <rect x="150px" y="150px" width="100px" height="100px" fill="#ffe3fe" />
    <use href="#circle" fill="#93329e" />
  </svg>

보라색 원을 제일 위로 오게 했다.

그런데 이 방법은 문제가 있는 게

use의 원본 태그도 존재하고, 그위에

복사해서 붙여 넣은 것뿐이라.

뭐랄까.. 굳이..? 란 느낌이 든다.

무슨 뜻이냐면, 

<svg version="1.1"
    baseProfile="full"
    width="300px" height="300px"
    xmlns="http://www.w3.org/2000/svg">

    <rect width="100px" height="100px" fill="#440a67" />
    <circle id="circle" cx="100px" cy="100px" r="50px" fill="#93329e" />
    <rect x="100px" y="100px" width="100px" height="100px" fill="#b4aee8" />
    <rect x="150px" y="150px" width="100px" height="100px" fill="#ffe3fe" />
    <use href="#circle" x="25px" fill="#93329e" />
  </svg>

이렇게 살짝 옮겨보면 ( use에서 x, y 위치는

원본 태그의 상대 값

이다)

이렇게 밑에 원본 데이터가 남아있는 걸 확인할 수 있다.

 

마크업 순서 바꾸기

그렇게 되어, 제일 깔끔한 건

마크업 순서 자체를 바꾸는 것이다.

svg version="1.1"
    baseProfile="full"
    width="300px" height="300px"
    xmlns="http://www.w3.org/2000/svg">

    <rect width="100px" height="100px" fill="#440a67" />
    <rect x="100px" y="100px" width="100px" height="100px" fill="#b4aee8" />
    <rect x="150px" y="150px" width="100px" height="100px" fill="#ffe3fe" />
    
    <circle id="circle" cx="100px" cy="100px" r="50px" fill="#93329e" />
  </svg>

뭐 행동 자체는 이렇게 간단한데,

코드를 직접 수정할 수 있으면 문제가 아니다.

이 문제를 해결하고자 하는 사람은 목적이 살짝 다를 것이다.

함수를 통해서 자동으로 바꾸고 싶다!

<svg id="svg"
  version="1.1"
  baseProfile="full"
  width="300px" height="300px"
  xmlns="http://www.w3.org/2000/svg">
  
  <rect width="100px" height="100px" fill="#440a67" />
  <rect x="100px" y="100px" width="100px" height="100px" fill="#b4aee8" />
  <rect x="150px" y="150px" width="100px" height="100px" fill="#ffe3fe" />
</svg>

일단 html에서 원을 뺐다.

함수로 추가할 거니깐

자 이제 마크업은 끝났고,

이제 스크립트에서 원을 추가해보자.

<svg id="svg"
  version="1.1"
  baseProfile="full"
  width="300px" height="300px"
  xmlns="http://www.w3.org/2000/svg">
  
  <rect width="100px" height="100px" fill="#440a67" />
  <rect x="100px" y="100px" width="100px" height="100px" fill="#b4aee8" />
  <rect x="150px" y="150px" width="100px" height="100px" fill="#ffe3fe" />
</svg>

<script>
  var newCircle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
  var vSvg = document.getElementById("svg");
  
  newCircle.setAttribute('style','cx:100px; cy:100px; r:50px; fill:#93329e');
  vSvg.appendChild(newCircle);
</script>

일단 대부분 태그 만들 때(요소 만들 때)

createElement를 쓰는데,

여기서는 w3.org라는 url에서 양식을 받아 써야 하기 때문에, (svg가 이 양식을 쓰기에)

createElementNS를 써 w3.org에서 양식을 받아와야 한다.

 

그다음은 svg안에 넣어야 하니깐 svg태그를 변수로 지정하였고,

속성 설정한 뒤 넣어주었다.

끝

오우 원래 포스트 하는 중에

함수로 만드는 방법에 막혀서 함수로 하는 법은 내일 알아보고 추가해야 하나 했는데,

미완성의 포스트는 쓰기 싫어 더 노력했더니

방법을 알아내 완성하였다.

어떤 상황이든 나아가는 모습

내가 바라왔던 모습이기에 정말 만족한다.