SVG 변환 원점: 아트워크의 중심을 기준으로 회전하기

CSS로 SVG 아트워크를 자체 중심 주위로 회전하려면 관련 경로를 하나의 그룹에 넣고 그 그룹에 transform-box: fill-box와 transform-origin: center를 적용하세요. 그런 다음 같은 그룹에 회전을 적용하세요. 두 속성은 각각 어떤 사각형을 기준으로 삼는지, 그 사각형 안 어디에 회전 중심을 두는지 결정합니다.

가져온 아이콘이 캔버스를 가로질러 크게 움직인다면 경로 좌표를 바꾸기 전에 그 기준을 확인하세요. 조각들이 따로 회전한다면 어떤 요소에 변환이 적용되는지 확인하세요. 기존 벡터 아트워크에는 보통 그룹이나 변환 수정이 필요합니다. 추적은 먼저 래스터 원본에서 편집 가능한 경로를 얻어야 할 때만 유용합니다.

center만 지정해도 아트워크가 이동할 수 있는 이유

경로나 그룹 같은 일반적인 SVG 자식의 기본 변환 원점은 0 0입니다. 루트 SVG 요소의 기본값은 다릅니다. 기본 transform-box: view-box에서는 원점을 center로 설정해도 아트워크 자체 경계가 아닌 SVG 기준 뷰포트를 가리킵니다. MDN의 SVG transform-origin 참조는 기본값과 예외를 설명합니다.

따라서 로고 주변의 빈 공간도 중요합니다. 큰 그리기 영역의 한쪽 모서리에 놓인 작은 기호의 중심은 그 영역의 중심과 다릅니다. transform-box: fill-box는 기준을 요소의 객체 경계 상자로 바꿉니다. SVG를 자르거나 빈 공간을 제거하지는 않습니다. transform-box 참조는 스트로크를 포함한 기준이 필요할 때 쓰는 stroke-box 등 사용 가능한 상자를 정의합니다.

두 경로를 하나의 마크로 회전하기

이 전체 예제를 rotation.svg로 저장하고 브라우저에서 여세요. 좌표 원점에서 떨어져 배치한, 직접 작성한 정사각형과 분리된 삼각형 강조 요소를 사용합니다. 독립형 파일에 회전 규칙이 포함되도록 CSS를 SVG 안에 넣습니다.

<svg xmlns="http://www.w3.org/2000/svg"
  width="480" height="360" viewBox="0 0 280 210"
  role="img" aria-label="Two-piece artwork rotated around its shared center">
  <style>
    .artwork {
      transform-box: fill-box;
      transform-origin: center;
      transform: rotate(35deg);
    }
  </style>
  <g class="artwork">
    <path fill="#147d78" d="M80 50H160V130H80Z" />
    <path fill="#ed9750" d="M170 70L220 90L170 110Z" />
  </g>
</svg>

회전 전 결합된 아트워크의 범위는 x = 80부터 220, y = 50부터 130입니다. 상자의 너비는 140 단위, 높이는 80 단위이므로 중심은 (150, 90)입니다. 그룹이 회전하면 정사각형과 강조 요소의 관계가 유지됩니다.

같은 경로의 고정 각도 상태 네 가지를 브라우저에서 렌더링하고 기하학적 정보를 읽은 뒤 위의 전체 SVG도 별도로 다시 열었습니다. 기본 원점 결과에 공간을 남기도록 비교에서는 더 넓은 보기 영역을 사용했습니다. 직접 작성한 시연 경로이며 PerfectVector 변환 출력이나 모든 브라우저와 편집기의 테스트가 아닙니다.

기본 원점 버전은 마크를 (0, 0) 주위로 움직입니다. 중심을 지정한 두 그룹 버전은 일치합니다. 마지막 패널에서는 정사각형이 (120, 90) 주위로, 삼각형 강조 요소가 (195, 90) 주위로 회전합니다. 각 부분은 자체 시작 위치 근처에 남지만 마크가 더는 하나의 객체로 회전하지 않습니다.

자신의 파일에서는 함께 움직여야 할 조각만 선택하세요. 배경 직사각형, 맞춤 표시, 멀리 떨어진 불필요한 경로는 그룹 경계를 키울 수 있습니다. SVG 편집 작업 흐름은 동작을 추가하기 전에 파일을 검사하고 정리하는 방법을 다룹니다.

회전 중심이 디자인 선택일 때 명시적인 좌표 사용하기

SVG transform 속성으로 각도와 회전 중심을 직접 지정할 수 있습니다. 예제에서 <g class="artwork">를 <g transform="rotate(35 150 90)">로 바꾸세요. 두 경로는 그 안에 유지하세요. 클래스를 제거하면 CSS transform이 속성을 덮어쓰는 것도 중단됩니다.

속성의 rotate(angle cx cy) 형식은 도 단위 각도 뒤에 현재 사용자 좌표계의 회전 중심을 지정합니다. CSS의 rotate(35deg)는 문법이 다르고 별도의 속성에서 원점을 가져옵니다. CSS transform과 SVG transform 속성이 같은 요소를 대상으로 하면 CSS가 우선합니다. MDN의 transform 속성 참조를 확인하세요.

명시적인 좌표는 경첩, 바늘, 의도적으로 치우친 로고 회전 중심에 유용합니다. 회전할 그룹과 같은 로컬 좌표계로 유지하세요. 화면에서 측정한 좌표를 중첩된 SVG 그룹에 그대로 붙여 넣을 수 있는 것은 아닙니다.

기존 그룹에 이미 배치 변환이 있다면 유지하고 아트워크를 담은 새로운 내부 그룹에 회전을 적용하세요. 그런 다음 내보낸 파일을 테스트하세요. 기존 변환을 대체하면 마크를 배치한 이동이나 배율이 사라질 수 있습니다. 배율을 바꿀 때 마크도 이동한다면 SVG 변환 순서 예제가 이동과 배율의 결합 방식을 보여줍니다.

중심을 계산하기 전에 경계 읽기

이 예제 같은 단순한 그룹의 중심 계산은 다음과 같습니다.

cx = x + width / 2
cy = y + height / 2

브라우저 측정에서 그룹의 getBBox()는 x: 80, y: 50, width: 140, height: 80을 반환했습니다. 그룹 자체의 회전은 이 로컬 상자 값을 바꾸지 않았습니다. getBBox 문서는 이 사용자 공간 값과 브라우저 뷰포트에 상대적인 사각형을 반환하는 getBoundingClientRect()를 구분합니다.

선택 윤곽이나 맞춤 viewBox에는 SVG 경계 상자 작업 흐름이 좌표계 사이 변환과 스트로크 여백 확인을 보여줍니다.

회전하려는 요소를 측정하세요. 자식 변환은 포함하는 그룹의 경계에 영향을 줄 수 있습니다. 자식을 따로 회전한 그룹의 경계는 원래 두 도형의 경계와 달랐습니다. 위의 단순한 숫자를 재사용하기 전에 래퍼, 중첩된 배율, 불필요한 도형을 확인하세요.

상자 중심이 항상 시각적 중심은 아닙니다

이 예제의 정사각형은 삼각형 강조 요소보다 훨씬 큰 면적을 차지합니다. 결합 상자의 중점은 여전히 가장 왼쪽과 가장 오른쪽 가장자리의 중간에 있습니다. 이는 기하학적 규칙이며 회전할 때 디자인이 균형 있게 보이는지 판단하지 않습니다.

상자 중심부터 시작해 여러 각도에서 마크를 검사하고 디자인에 필요하다면 명시적인 회전 중심으로 바꾸세요. 시계 바늘에는 보통 부착 지점이 필요합니다. 강조 요소가 치우친 로고에는 디자이너가 선택한 중심이 필요할 수 있습니다. 이 결정은 실수로 뷰포트를 기준으로 삼은 원점을 수정하는 일과 구분하세요.

회전에도 공간이 필요합니다. 회전하지 않은 아트워크에 딱 맞춰 내보내면 회전 후 모서리가 잘릴 수 있습니다. 보기 영역에 충분한 공간을 남기고 부모 클리핑도 확인하세요. 전체 파일이 잘못된 배율로 가져와진다면 개별 조각을 바꾸기 전에 SVG 크기 진단을 사용하세요.

이 작업 흐름은 윤곽을 다시 쓰지 않고 기존 도형을 회전합니다. 한 윤곽을 다른 윤곽으로 바꾸려는 경우 SVG 모핑 가이드가 경로 기하학적 형태를 맞추는 별개의 문제를 다룹니다.

회전 중심 설정 전에 원본 준비하기

아이콘이 PNG나 JPG로만 있고 개별 도형을 편집해야 한다면 PerfectVector로 SVG 후보를 준비할 수 있습니다. 아트워크를 벡터로 변환하고 실루엣과 분리된 디테일을 검사한 뒤 함께 회전할 조각을 그룹으로 묶으세요. 그룹을 측정하기 전에 불필요한 배경 도형을 확인하세요.

비트맵은 추적 없이도 전체를 회전할 수 있습니다. 편집 가능한 기하학적 형태가 작업의 일부일 때 벡터화를 사용하세요. 이미 사용 가능한 벡터 마스터가 있다면 유지하세요. 변환 원점 변경은 손상된 윤곽을 복구하지 않으며 래스터 복사본 추적은 불필요한 복원 단계를 추가합니다.

파일을 전달하기 전에 바로 그 SVG를 대상에서 다시 여세요. 의도한 조각들이 함께 회전하고 선택한 위치에 회전 중심이 유지되며 회전한 아트워크에 충분한 공간이 있는지 확인하세요. 향후 편집을 위해 변경하지 않은 마스터를 보관하세요. 블로그의 SVG 작업 흐름 글은 관련 준비 및 내보내기 확인을 다룹니다.

FAQ

transform-origin: center가 SVG를 캔버스 주위로 회전시키는 이유는 무엇인가요? 기본 view-box 기준을 쓰는 SVG 자식에서 center는 SVG 기준 뷰포트를 가리킵니다. 객체 경계 상자를 사용하려면 회전할 요소의 transform-box를 fill-box로 설정하세요.

그룹과 각 경로 중 무엇을 회전해야 하나요? 조각들이 하나의 마크로 움직여야 한다면 그룹을 회전하세요. 각 경로에 fill-box와 center를 적용하면 조각마다 자체 회전 중심이 생겨 결합된 배치가 바뀝니다.

fill-box center가 비대칭 로고를 균형 있게 보이게 하나요? 객체 경계 상자의 중심을 선택합니다. 시각적 균형에는 다른 회전 중심이 필요할 수 있으므로 여러 각도에서 로고를 살펴보고 필요할 때 명시적인 좌표를 선택하세요.

Sources

1. MDN — SVG transform-origin — SVG 원점 기본값, 루트 요소 예외, 기준 상자 관계를 정의합니다.
2. MDN — transform-box — 객체, 스트로크, 뷰포트 기준 상자를 정의합니다.
3. MDN — SVG transform — 명시적인 회전 좌표, 그룹 변환, CSS 우선순위를 설명합니다.
4. MDN — getBBox — 로컬 기하학적 측정값과 뷰포트 사각형의 차이를 설명합니다.

래스터 원본에서 편집 가능한 도형이 필요한가요? PerfectVector로 SVG를 준비하고 복원한 조각을 검사한 뒤 그룹으로 묶고 최종 출력 파일에서 선택한 회전 중심을 확인하세요.