SVG 요소의 쌓이는 순서
SVG는 CSS의 z-index와 같이 요소의 쌓이는 순서를 조절할 수 있는 별도의 속성이 없습니다. SVG 요소가 쌓이는 순서는 마크업 순서에 절대적으로 의존합니다.
2개의 그래픽 요소(파이 차트, 삼각 플라스크)를 예제로 하여 SVG 뷰포트에 쌓이는 순서에 대해 학습해보겠습니다.
<svg viewBox="0 0 96 96" width="96" height="96">
<defs>
<style>
.pie-l { fill:#00bcd4; }
.pie-tr { fill:#448aff; }
.pie-mr { fill:#3F51B5; }
</style>
</defs>
<!-- 파이 차트 -->
<g id="pie-chart">
<path
class="pie-l"
d="M29.098,28.786C27.821,30.146,26.012,31,24,31c-3.866,0-7-3.134-7-7c0-3.866,3.134-7,7-7V4
C13.002,4,4,13.002,4,24c0,10.998,9.002,20,20,20c5.777,0,10.998-2.444,14.557-6.332L29.098,28.786z" />
<path
class="pie-tr"
d="M24,4v13c3.866,0,7,3.134,7,7h13C44,13.002,34.998,4,24,4z" />
<path
class="pie-mr"
d="M31,24c0,2.232-1.048,4.216-2.676,5.497l8.009,10.226C40.995,36.062,44,30.387,44,24H31z" />
</g>
<!-- 삼각 플라스크 -->
<g id="triangular-flask" transform="translate(24 0) scale(1.05)">
<path style=" fill:#90CAF9;" d="M 29 21 L 19 21 L 7.207031 35.144531 C 7.15625 35.191406 7.113281 35.246094 7.066406 35.296875 L 6.828125 35.566406 L 6.847656 35.566406 C 6.324219 36.238281 6 37.078125 6 38 C 6 40.210938 7.789063 42 10 42 L 38 42 C 40.210938 42 42 40.210938 42 38 C 42 37.109375 41.699219 36.296875 41.207031 35.632813 L 41.222656 35.632813 L 41.039063 35.429688 C 40.949219 35.320313 40.859375 35.210938 40.757813 35.113281 Z "></path>
<path style=" fill:#90CAF9;" d="M 19 9 L 29 9 L 29 22.417969 L 19 22.417969 Z "></path>
<path style=" fill:#90CAF9;" d="M 31 8 C 31 9.105469 30.105469 10 29 10 L 19 10 C 17.894531 10 17 9.105469 17 8 C 17 6.894531 17.894531 6 19 6 L 29 6 C 30.105469 6 31 6.894531 31 8 Z "></path>
<path style=" fill:#F50057;" d="M 39.601563 36.820313 L 39.585938 36.804688 L 39.554688 36.765625 L 39.53125 36.742188 L 39.515625 36.722656 L 39.464844 36.664063 C 39.433594 36.628906 39.40625 36.589844 39.371094 36.554688 L 39.3125 36.5 L 39.265625 36.449219 L 32.671875 28.5 L 15.324219 28.5 L 8.695313 36.480469 L 8.644531 36.53125 C 8.605469 36.574219 8.578125 36.609375 8.546875 36.644531 L 8.507813 36.6875 L 8.429688 36.789063 C 8.234375 37.042969 8 37.457031 8 38 C 8 39.101563 8.898438 40 10 40 L 38 40 C 39.101563 40 40 39.101563 40 38 C 40 37.472656 39.78125 37.066406 39.601563 36.820313 Z "></path>
<path style=" fill:#F48FB1;" d="M 32 35 C 32 36.65625 30.65625 38 29 38 C 27.34375 38 26 36.65625 26 35 C 26 33.34375 27.34375 32 29 32 C 30.65625 32 32 33.34375 32 35 Z "></path>
<path style=" fill:#F8BBD0;" d="M 24 32 C 24 33.105469 23.105469 34 22 34 C 20.894531 34 20 33.105469 20 32 C 20 30.894531 20.894531 30 22 30 C 23.105469 30 24 30.894531 24 32 Z "></path>
<path style=" fill:#E3F2FD;" d="M 27 23 C 27 24.105469 26.105469 25 25 25 C 23.894531 25 23 24.105469 23 23 C 23 21.894531 23.894531 21 25 21 C 26.105469 21 27 21.894531 27 23 Z "></path>
<path style=" fill:#E3F2FD;" d="M 25 16.5 C 25 17.328125 24.328125 18 23.5 18 C 22.671875 18 22 17.328125 22 16.5 C 22 15.671875 22.671875 15 23.5 15 C 24.328125 15 25 15.671875 25 16.5 Z "></path>
</g>
</svg>두 요소의 마크업 순서를 뒤바꾸면 화면에 렌더링 되는 요소의 쌓이는 순서 또한 바뀌게 됩니다.
<svg viewBox="0 0 96 96" width="96" height="96">
...
<!-- 삼각 플라스크 -->
<g id="triangular-flask" transform="translate(24 0) scale(1.05)">
...
</g>
<!-- 파이 차트 -->
<g id="pie-chart">
...
</g>
</svg>Last updated
