SVG 패턴 변환: 윤곽은 유지하고 채우기만 회전하기
patternTransform으로 고정된 엠블럼 안의 반복 무늬를 회전하거나 이동하세요. 객체 전체 회전과 비교하고 원본, 도형, 브라우저 픽셀을 확인합니다.
목차
고정된 도형 안에서 SVG 패턴을 회전하려면 pattern 요소에 patternTransform="rotate(...)"를 넣으세요. 도형 자체의 변환은 그대로 유지합니다. 반복 그림이 놓이는 위치를 옮기려면 같은 패턴에 평행 이동을 적용하세요.
이 편집은 채색 좌표계를 움직입니다. 도형을 포함한 그룹을 회전하면 화면에 표시되는 도형도 움직입니다. 직접 만든 속이 빈 엠블럼에서 이 차이를 확인할 수 있습니다. 채색만 회전하면 윤곽은 똑바로 유지되지만, 별도의 객체 전체 회전 대조군에서는 엠블럼과 구멍이 함께 기울어집니다.
무엇을 움직일지 요소 선택하기
현재 patternTransform 참고 문서는 패턴 타일에 적용하는 변환 목록을 설명합니다. SVG2 패턴 정의는 타일의 좌표계와 채색 변환을 설명합니다.
이 예제의 무늬는 24단위 타일 안에서 반복되는 작고 비대칭적인 꺾인 모양입니다. 채색되는 도형은 이와 다른 경로로, 직사각형 구멍이 있는 비대칭 배지입니다. 두 역할을 분리하면 무엇을 편집할지 더 명확하게 판단할 수 있습니다.
| 원하는 변화 | 속성을 넣을 위치 | 확인할 내용 |
|---|---|---|
| 반복 무늬 영역 회전 | pattern의 patternTransform | 무늬 방향과 타일 격자 |
| 배지 안의 무늬 위치 이동 | pattern의 patternTransform | 윤곽과 구멍에서 반복 무늬가 놓이는 위치 |
| 배지 전체 회전 | 해당 그룹의 transform | 표시되는 윤곽, 구멍, 경계 |
여기서는 SVG 속성을 직접 사용합니다. CSS transform 구현에 관한 MDN의 참고 사항이 pattern-transform이라는 CSS 속성이 대상 환경에서 작동한다는 보장은 아닙니다.
채우기를 회전하는 완전한 시작 예제 열기
이 SVG를 pattern-emblem.svg로 저장하고 브라우저에서 여세요. 외부 이미지나 라이브러리가 없는 독립 파일입니다. 패턴은 원본 점 (100,80)을 중심으로 30도 회전하며, 채색되는 그룹에는 변환이 없습니다.
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">
<defs>
<pattern id="motif" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" width="24" height="24" patternTransform="rotate(30 100 80)">
<rect width="24" height="24" fill="#f4f0e4"/>
<path d="M3 4 H15 V8 H9 V17 H3 Z" fill="#c15a38"/>
</pattern>
</defs>
<g>
<path id="emblem" d="M30 25 H130 L170 65 L140 135 H30 Z M65 60 H110 V100 H65 Z" fill="url(#motif)" fill-rule="evenodd"/>
</g>
</svg>evenodd 채우기 규칙은 안쪽 직사각형을 비워 둡니다. 교차 횟수에 따른 규칙은 fill-rule 참고 문서를 보세요. 구멍은 엠블럼 경로의 일부이므로 반복 채색을 회전해도 구멍은 회전하지 않습니다.
이 원본은 patternUnits와 patternContentUnits를 모두 명시합니다. patternUnits 참고 문서는 타일 좌표계를 정의합니다. 패턴 단위 가이드는 타일 치수와 무늬 좌표를 자세히 다룹니다. 여기서는 변환 효과만 분리해 보기 위해 이를 고정합니다. 이음새 없는 반복 패턴을 디자인하는 방법을 설명하는 예제는 아닙니다.
회전, 평행 이동, 도형 대조군 비교하기
시작 예제의 사본 세 개를 만들고 표시된 속성만 바꾸세요.
- 원래 채색을 보려면 패턴에서
patternTransform을 제거합니다. - 채색을 옮기려면 해당 속성을
patternTransform="translate(7 5)"로 바꿉니다. - 객체 전체 회전 대조군에서는 패턴 변환을 제거하고 채색되는
g요소에transform="rotate(20 100 80)"를 추가합니다.
평행 이동한 사본은 무늬의 방향을 유지하면서 배지 안에 놓이는 위치를 바꿉니다. 경계에 있던 무늬가 채색되는 도형 안으로 들어오거나 바깥으로 나갈 수 있습니다. 회전 사본에서는 무늬와 반복 격자가 함께 회전합니다. 각 무늬를 자체 중심 주위로 돌리는 것만은 아닙니다.
객체 대조군에 사용한 특정 점 중심의 회전은 transform 속성 참고 문서에 설명되어 있습니다. 이 변환은 그룹의 도형이 표시되는 방식을 바꿉니다. 일반적인 패턴 채색도 함께 움직입니다. 사용자 좌표계의 패턴 단위라고 해서 이 예제의 채색이 전체 공간에서 고정되는 것은 아닙니다.
결과를 진단할 때는 하나의 변환으로 시작하세요. 나중에 회전, 평행 이동, 크기 조절을 조합한다면 SVG 변환 순서 가이드에서 순서를 확인합니다. 변환을 조합하면 별도의 좌표 문제가 생기는데, 이 통제된 비교에서는 그 문제를 피합니다.
도형과 픽셀을 따로 확인하기
직접 만든 네 가지 변형을 Chrome에서 200×160 및 400×320 CSS 픽셀로 렌더링했습니다. 브라우저의 기기 픽셀 비율은 2였습니다. 각 원본은 별도로 디코딩한 뒤 명시한 시험 크기와 내부 픽셀 치수가 같은 캔버스에 그렸습니다. 이를 통해 화면 캡처와 독립적으로 픽셀을 읽을 수 있었습니다.
모든 파일은 같은 엠블럼 d 문자열과 같은 무늬 경로를 포함합니다. 경로 요소는 두 개이며 이미지 요소는 없습니다. 변환이 다르므로 전체 파일 해시는 다릅니다. 엠블럼의 로컬 도형 상자는 모든 경우에 (30,25,140,110)입니다.
로컬 상자만 보면 객체 전체의 변화를 놓치게 됩니다. 이 다각형 엠블럼에서는 바깥 꼭짓점 다섯 개를 실제 브라우저 행렬로 변환하고 표시 범위도 측정했습니다. 표에서는 큰 뷰포트의 값을 원본 단위로 정규화했습니다.
| 변형 | 패턴 변환 | 그룹 변환 | 표시된 외곽 범위 x,y,너비,높이 |
|---|---|---|---|
| 원본 | 없음 | 없음 | 30,25,140,110 |
| 채색 회전 | rotate(30 100 80) | 없음 | 30,25,140,110 |
| 채색 이동 | translate(7 5) | 없음 | 30,25,140,110 |
| 객체 회전 | 없음 | rotate(20 100 80) | 약 15.41,4.38,155.50,140.99 |
정규화한 범위는 두 시험 크기에서 일치했습니다. 객체 대조군은 같은 d 문자열을 유지하지만 표시되는 도형은 달라집니다. 따라서 원본 데이터가 같다는 사실은 경로 구성이 유지됐다는 유용한 근거이지만, 눈에 보이는 윤곽이 제자리에 있다는 충분한 근거는 아닙니다.
채색만 바꾼 변형에서는 각 크기의 전체 캔버스 픽셀 버퍼가 원본과 달랐습니다. 원본 점 (45,45)에서 원본 표본은 타일 배경 (244,240,228), 채색 회전 표본은 테라코타색 무늬 (193,90,56)였으며 둘 다 알파는 255였습니다. 평행 이동에서는 전체 버퍼가 달랐지만 그 특정 표본은 바뀌지 않았습니다. 한 점만 표본으로 삼으면 채색 이동을 놓칠 수 있습니다.
원본 좌표 (85,80)의 구멍은 여덟 경우 모두 알파가 0이었습니다. 각 크기에서 똑바로 선 세 변형의 완전 불투명 픽셀 경계도 같았습니다. 이렇게 임곗값으로 구한 픽셀 경계는 정확한 윤곽 꼭짓점 범위와 같은 측정이 아닙니다. 이 관찰은 직접 작성한 원본과 브라우저에 한정되며 렌더러 호환성 인증은 아닙니다.
전달 전에 저장된 결과를 대상 환경에서 확인하기
도형 기준으로 원본 엠블럼을 보관하고, 채색 효과는 별도 사본에 유지하세요. 반복 페인트 서버가 눈에 보이는 모든 무늬를 후속 커팅 도구나 편집기에서 선택할 수 있는 독립 도형으로 바꾸지는 않습니다. 대상 도구에 확장된 도형이 필요하다면 그 확장 작업을 별도로 준비하고 확인하세요. SVG 편집 가이드는 더 넓은 범위의 원본 변경을 다룹니다.
윤곽이 예상치 않게 회전한다면 패턴을 조정하기 전에 해당 그룹과 상위 요소의 변환을 점검하세요. 여러 인라인 사본이 예상치 않게 같은 채색을 공유한다면 패턴 ID와 대응하는 fill 참조에 고유한 이름을 부여합니다. 이 비교용 시험에서는 ID를 서로 분리했습니다. 별도의 독립 SVG 파일끼리는 문서 수준의 리소스 이름 공간을 공유하지 않습니다.
사용자 지정 무늬나 엠블럼이 PNG 또는 JPG로만 있고 편집 가능한 윤곽이 필요하다면 PerfectVector로 SVG를 준비하고 윤곽과 구멍을 확인한 뒤 깔끔한 원본을 보관하세요. 그다음 SVG 코드에서 반복을 만들고 채색 변환을 선택합니다. 벡터화는 그림을 준비하는 작업입니다. 반복 무늬를 디자인하거나 그 위상을 선택하거나 대상 도구의 패턴 처리를 보장하지는 않습니다. 기존의 깔끔한 경로는 바로 패턴 편집에 사용할 수 있습니다. 벡터화 가이드는 래스터 변환이 언제 유용한지 설명합니다.
자주 묻는 질문
patternTransform은 엠블럼의 경로 데이터를 바꾸나요? 이 예제에서는 패턴 채색을 변환합니다. 엠블럼의 d 문자열은 그대로입니다. d가 바뀌지 않아도 표시되는 도형이 움직일 수 있으므로 채색되는 그룹과 상위 요소의 변환도 확인하세요.
회전하지 않고 패턴을 옮길 수 있나요? 네. translate(7 5) 변형은 무늬 방향을 유지하면서 채색 위치를 옮깁니다. 효과를 시험할 때 타일 치수와 채색되는 도형은 고정하세요.
그룹 전체를 회전하면 패턴도 함께 회전하는 이유는 무엇인가요? 그룹 변환은 표시되는 도형과 그 채색을 함께 바꿉니다. 패턴 요소에만 변환을 넣는 것과는 다른 작업입니다.
반복 무늬들은 각각 편집 가능한 별도 경로인가요? 이 원본에는 페인트 서버 안의 무늬 경로 하나와 채색을 받는 엠블럼 경로 하나가 있습니다. 눈에 보이는 반복 무늬는 각각 따로 작성한 경로 요소가 아닙니다. 대상 도구에서 그 형태가 필요하다면 별도로 확장하고 확인하세요.
출처
- MDN — patternTransform — 패턴 변환 목록과 속성 구현에 관한 참고 사항입니다.
- W3C — SVG2 패턴 — 타일 좌표계와 채색 변환을 설명합니다.
- MDN — fill-rule — 채색되는 경로에서 홀짝 규칙으로 만드는 구멍을 설명합니다.
- MDN — transform — 화면에 표시되는 그룹 도형에 적용하는 회전입니다.
- MDN — patternUnits — 이 비교에서 고정한 명시적 타일 좌표계입니다.
