SVG z-index가 작동하지 않나요? 경로 쌓임 순서 고치기

CSS z-index를 높여도 SVG 경로가 다른 도형 뒤에 있다면 SVG 요소 순서를 확인하세요. 일반적인 SVG 그리기 순서는 앞선 도형을 먼저 칠하고 뒤의 도형이 덮습니다. 경로를 앞으로 가져오려면 덮어야 할 도형 뒤에 배치하세요. SVG 렌더링 모델은 이 순서를 정의합니다.

먼저 겹침이 어디서 발생하는지 확인하세요. SVG 전체가 페이지 헤더 뒤에 있으면 HTML 레이아웃 문제이고, 같은 SVG 내부 두 도형의 겹침이면 그림 순서 문제입니다. 아래 해결책은 두 번째 사례를 다룹니다.

문양 하나에서 차이 확인하기

주황색 별, 파란 원판과 녹색 리본으로 직접 3부분 문양을 그렸습니다. 왼쪽 패널에서는 별이 SVG의 첫 요소이고 CSS position: relative와 z-index: 999가 있습니다. 브라우저는 z-index 값을 계산하지만 이후 원판과 리본이 여전히 별을 덮습니다. 오른쪽 패널은 요소 순서만 바뀌며 같은 별이 마지막에 있어 앞에 표시됩니다.

테스트는 HeadlessChrome 141과 1200 × 680 스크린샷을 사용했습니다. 보고한 자식 순서는 왼쪽이 star, disk, ribbon이고 오른쪽이 disk, ribbon, star였습니다. 일반적으로 겹치는 SVG 자식에 대한 좁은 테스트이며 모든 렌더러, 중첩 그룹이나 효과를 보장하지는 않습니다.

SVG 파일에서 순서 고치기

텍스트 편집기에서 SVG 소스를 열거나 벡터 편집기에서 객체를 확인하세요. 겹치는 도형을 찾고 파일에서 위에서 아래로 읽으세요. 앞선 형제 요소가 먼저 칠해집니다. 앞에 보여야 하는 객체를 덮어야 할 객체 뒤로 옮긴 뒤 사본을 저장하세요.

예를 들어 이 단순한 그림은 별을 마지막에 둡니다.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 160">
  <circle cx="120" cy="80" r="55" fill="#4f86df"/>
  <path d="M20 90 Q110 60 220 100 L220 125 Q110 85 20 115Z"
        fill="#22a79a"/>
  <path id="star" d="M120 20 L135 60 175 62 145 88 155 130
           120 108 85 130 95 88 65 62 105 60Z"
        fill="#ff8c64"/>
</svg>

이 수정에는 경로 데이터와 채우기 색을 바꿀 필요가 없습니다. 디자인 애플리케이션에 Bring to Front 명령이 있다면 그 뒤 SVG를 내보내고 저장한 마크업을 확인하거나 다시 여세요. 편집기 레이어 패널은 유용하지만 다음 렌더러가 읽는 것은 전달 파일입니다.

인터랙티브 SVG에서는 JavaScript로 기존 자식을 현재 부모의 끝으로 옮길 수 있습니다.

const star = document.querySelector("#star");
star.parentNode.appendChild(star);

MDN appendChild 참고 문서는 기존 노드를 추가하면 두 번째 사본을 만드는 대신 이동한다고 확인합니다. DOM 변경이 애플리케이션의 일부일 때만 사용하세요. 정적 로고 파일은 의도한 순서를 SVG 자체에 넣는 편이 보통 더 명확합니다.

그룹, 구멍과 다른 종류의 순서 확인하기

별이 그룹에 속하면 그 그룹 안에서 마지막으로 옮겨도 그룹 전체는 뒤의 형제 그룹 뒤에 남을 수 있습니다. 부모 구조를 확인하세요. 그룹 전체를 앞으로 가져오려면 관련 그룹을 옮기고, 그룹 내부 부분만 겹치면 자식 순서를 바꾸세요. 자식을 그룹 밖으로 옮길 때는 주의하세요. 그룹에 변환, 클리핑, 불투명도나 마스크가 있을 수 있습니다. SVG 렌더링 모델의 그룹 절은 그룹 콘텐츠가 함께 렌더링되는 이유를 설명합니다.

객체 순서 수정으로 경로 도형의 실제 구멍이나 틈을 고칠 수도 없습니다. 내보낸 뒤 글자나 문양 중앙이 채워지면 도형과 대상 파일을 확인하세요. 문서 순서상 나중에 나오는 불투명 객체가 구멍을 덮고 있을 수도 있습니다. SVG 구멍 가이드는 이 사례와 채우기 규칙·윤곽선 문제를 구분하는 데 도움이 됩니다. 인접 도형 사이에 얇은 흰 선이 보이면 쌓임을 바꾸기 전에 틈 진단을 사용하세요.

마지막으로 paint-order는 다른 설정입니다. 한 요소의 채우기, 스트로크와 마커를 언제 칠할지 바꾸며 그 요소를 이웃 경로 위에 놓지는 않습니다. MDN paint-order 참고 문서는 그 범위를 정의합니다. 로고의 한 색상 부분이 다른 부분을 가리는 경우보다 두꺼운 외곽선이 자신의 채우기를 가릴 때 paint-order 가이드를 사용하세요.

CSS z-index는 MDN 문서에서 설명하는 위치 지정 HTML 상자와 flex·grid 항목에는 여전히 중요합니다. 그 페이지 레이아웃 사례와 SVG 내부에 저장된 경로 순서를 구분하세요.

PerfectVector 작업 흐름에서는 어떻게 적용하나요?

기존 SVG 원본이 있다면 사용하세요. 다시 벡터화하면 레이어 결정을 해결하지 않고 새 도형 집합만 생깁니다. 유일한 원본이 평면 PNG나 JPG 로고라면 PerfectVector는 앞 단계에서 도움이 될 수 있습니다. 이미지를 SVG 후보로 변환하고 편집기에서 별도 조각과 겹침을 확인하세요. 전달 전에 복원한 경로를 의도한 순서로 옮기세요. 변환은 디자인의 전경 객체를 지정하거나 작은 구멍이 추적 후 유지된다고 보장하지 않습니다.

원본에 흐림, 그림자나 작은 글자가 있다면 그 세부는 추적보다 수동 재작성이 더 신뢰할 만할 수 있습니다. 더 넓은 SVG 편집 가이드는 변환 후 경로 정리를 다룹니다.

전달할 파일 검증하기

1. 원본 SVG 사본을 저장하고 의도한 객체나 그룹만 재정렬하세요.
2. 겹침이 중요한 크기로 브라우저에서 저장 파일을 여세요. 원본 디자인과 비교하세요.
3. 실제 수신 편집기나 앱에서 다시 여세요. 같은 겹침과 마스크, 클리핑 영역, 구멍을 확인하세요.
4. 인터랙티브 SVG라면 재정렬 후 포인터와 호버 동작을 테스트하세요. 새로 맨 위에 온 도형이 이전에는 다른 도형이 받던 상호작용을 받을 수 있습니다.
5. 특정 확대나 내보내기 크기에서만 잘못 보이면 객체를 더 옮기기 전에 샘플링 경계선 또는 실제 틈을 확인하세요.

래스터 원본만 있다면 PerfectVector로 SVG 후보를 만들고 경로 순서, 구멍과 저장한 렌더링을 의도한 크기에서 확인하세요. 파일에 이미 올바른 벡터 도형이 있으면 재정렬부터 시작하세요.

FAQ

CSS z-index로 SVG 경로 하나를 맨 앞으로 가져올 수 있나요? SVG 하나 안의 일반 형제 도형은 SVG 문서 순서에서 경로를 더 나중으로 옮기세요. 주변 페이지 상자에 영향을 주는 CSS z-index가 자식 도형을 안정적으로 재정렬하지는 않습니다.

paint-order가 맨 위의 SVG 객체를 바꾸나요? 아닙니다. Paint-order는 하나의 도형이나 텍스트 요소 안에서 채우기, 스트로크와 마커 순서를 바꿉니다. 어느 객체가 다른 객체를 덮을지 바꾸려면 별도 객체를 재정렬하세요.

그룹의 마지막으로 옮겨도 경로가 가려지는 이유는 무엇인가요? 그룹 전체가 다른 그룹 뒤에 있을 수 있습니다. 자식을 그룹 밖으로 옮기기 전에 부모 그룹과 변환, 클리핑, 마스크나 불투명도를 확인하세요.

Sources

1. W3C — SVG 1.1 렌더링 모델 — SVG 문서 요소의 칠하기 순서를 정의합니다.
2. MDN — Node.appendChild() — 기존 DOM 자식을 추가할 때 이동하는 방식을 설명합니다.
3. MDN — SVG paint-order 속성 — paint-order의 범위를 도형의 채우기, 스트로크와 마커로 제한합니다.
4. MDN — CSS z-index 속성 — 페이지 쌓임에서 위치 지정·레이아웃 항목의 z-index를 설명합니다.
5. W3C — SVG 2 렌더링 모델 — SVG 쌓임 문맥, 그룹과 포인터 대상을 설명합니다.