HTML 그래픽 – SVG 변형

SVG 변형(Transformations)

SVG 변형 소개

SVG 변형은 SVG 요소의 위치, 크기, 회전 및 기울기를 변경하는 데 사용된다. SVG는 다양한 종류의 변형을 지원한다.

SVG 변형 종류

SVG에서 사용할 수 있는 변형 함수는 다음과 같다.

• translate(x,y) – 요소를 이동시킨다
• rotate(angle,cx,cy) – 요소를 회전시킨다
• scale(x,y) – 요소의 크기를 조절한다
• skewX(angle) – X축을 따라 요소를 기울인다
• skewY(angle) – Y축을 따라 요소를 기울인다
• matrix(a,b,c,d,e,f) – 사용자 정의 변형 행렬을 정의한다

SVG 요소의 변형을 위해서는 transform 속성을 사용한다.

SVG translate

translate() 함수는 요소를 현재 위치에서 지정된 양만큼 이동시킨다.

<svg height="200" width="250" xmlns="http://www.w3.org/2000/svg">

  <rect x="0" y="0" width="100" height="100" fill="blue" />

  <rect x="0" y="0" width="100" height="100" transform="translate(50,50)" fill="red" opacity="0.5" />

</svg>

코드 설명:

• 첫 번째 사각형은 기본 위치(0,0)에 파란색으로 그려진다.
• 두 번째 사각형은 translate(50,50) 변형이 적용되어 오른쪽으로 50px, 아래로 50px 이동한다.
• 두 번째 사각형은 opacity 속성으로 반투명하게 표시되어 두 사각형의 겹침을 볼 수 있다.

SVG rotate

rotate() 함수는 요소를 지정된 각도만큼 회전시킨다. 기본적으로 원점(0,0)을 중심으로 회전하지만, 선택적으로 회전 중심점을 지정할 수 있다.

<svg height="120" width="300" xmlns="http://www.w3.org/2000/svg">

  <rect x="20" y="20" width="80" height="50" fill="blue" />

  <rect x="20" y="20" width="80" height="50" transform="rotate(30)" fill="red" opacity="0.5" />

</svg>

지정된 중심점을 기준으로 회전:

<svg height="120" width="300" xmlns="http://www.w3.org/2000/svg">

  <rect x="20" y="20" width="80" height="50" fill="blue" />

  <rect x="20" y="20" width="80" height="50" transform="rotate(30 60 45)" fill="red" opacity="0.5" />

</svg>

코드 설명:

• 첫 번째 예제에서는 원점(0,0)을 기준으로 30도 회전한다.
• 두 번째 예제에서는 좌표 (60,45)를 기준으로 30도 회전한다.
• 회전 각도는 시계 방향으로 적용된다.

SVG scale

scale() 함수는 요소의 크기를 변경한다. 이 함수는 X축과 Y축 방향으로 각각 다른 비율로 크기를 조절할 수 있다.

<svg height="200" width="300" xmlns="http://www.w3.org/2000/svg">

  <rect x="20" y="20" width="60" height="40" fill="blue" />

  <rect x="20" y="20" width="60" height="40" transform="scale(2)" fill="red" opacity="0.5" />

</svg>

X축과 Y축에 대해 다른 비율로 크기 조절:

<svg height="200" width="300" xmlns="http://www.w3.org/2000/svg">

  <rect x="20" y="20" width="60" height="40" fill="blue" />

  <rect x="20" y="20" width="60" height="40" transform="scale(1.5,3)" fill="red" opacity="0.5" />

</svg>

코드 설명:

• 첫 번째 예제에서는 X와 Y 모두 2배로 확대한다.
• 두 번째 예제에서는 X 방향으로 1.5배, Y 방향으로 3배 확대한다.
• scale 변형은 요소의 위치도 함께 변경한다. 예를 들어, 좌표 (20,20)도 함께 확대된다.

SVG skew

skewX()와 skewY() 함수는 각각 X축과 Y축을 기준으로 요소를 기울인다.

<svg height="200" width="300" xmlns="http://www.w3.org/2000/svg">

  <rect x="20" y="20" width="80" height="50" fill="blue" />

  <rect x="20" y="20" width="80" height="50" transform="skewX(30)" fill="red" opacity="0.5" />

</svg>

<svg height="250" width="300" xmlns="http://www.w3.org/2000/svg">

  <rect x="20" y="20" width="80" height="50" fill="blue" />

  <rect x="20" y="20" width="80" height="50" transform="skewY(30)" fill="red" opacity="0.5" />

</svg>

코드 설명:

• skewX(30)은 X축 방향으로 30도 기울인다.
• skewY(30)은 Y축 방향으로 30도 기울인다.

SVG 다중 변형

여러 변형을 동시에 적용하려면 transform 속성 내에 공백으로 구분하여 함수들을 나열한다. 변형은 오른쪽에서 왼쪽 순서로 적용된다.

<svg height="200" width="300" xmlns="http://www.w3.org/2000/svg">

  <rect x="20" y="20" width="60" height="40" fill="blue" />

  <rect x="20" y="20" width="60" height="40" transform="translate(60,60) rotate(30) scale(1.5)" fill="red" opacity="0.5" />

</svg>

코드 설명:

• 위 변형은 다음 순서로 적용된다: 먼저 1.5배 확대, 그 다음 30도 회전, 마지막으로 (60,60) 만큼 이동한다.
• 변형 순서는 결과에 큰 영향을 미친다.

SVG matrix() 변형

matrix() 함수는 모든 2D 변형을 하나의 변형 행렬로 결합할 수 있는 강력한 방법을 제공한다. 이 함수는 6개의 매개변수 (a,b,c,d,e,f)를 사용한다.

<svg height="200" width="300" xmlns="http://www.w3.org/2000/svg">

  <rect x="20" y="20" width="60" height="40" fill="blue" />

  <rect x="20" y="20" width="60" height="40" transform="matrix(1,0.5,0.5,1,50,50)" fill="red" opacity="0.5" />

</svg>

코드 설명:

matrix(a,b,c,d,e,f) 함수는 다음 행렬 연산에 해당한다.

| a c e |   | x |   | ax + cy + e |
| b d f | * | y | = | bx + dy + f |
| 0 0 1 |   | 1 |   |      1      |

여기서:

• a와 d는 X축과 Y축의 크기 조절을 담당한다.
• b와 c는 X축과 Y축의 기울기를 담당한다.
• e와 f는 X축과 Y축의 이동을 담당한다.

SVG transform 속성과 사용법

변형 함수	설명	매개변수
translate(x,y)	요소를 X축과 Y축을 따라 이동시킨다.	x – X축 이동량 y – Y축 이동량 (생략 시 0)
rotate(angle, cx, cy)	지정된 각도만큼 요소를 회전시킨다.	angle – 회전 각도(도) cx, cy – 회전 중심점 (생략 시 (0,0))
scale(x,y)	요소의 크기를 조절한다.	x – X축 배율 y – Y축 배율 (생략 시 x와 동일)
skewX(angle)	X축을 따라 요소를 기울인다.	angle – 기울기 각도(도)
skewY(angle)	Y축을 따라 요소를 기울인다.	angle – 기울기 각도(도)
matrix(a,b,c,d,e,f)	사용자 정의 변형 행렬을 적용한다.	a,b,c,d,e,f – 2D 변형 행렬 값

SVG viewBox와 변형

SVG의 viewBox 속성은 SVG 캔버스의 특정 영역을 확대하거나 축소하는 방법을 제공한다. 이것은 viewport 내에서 SVG 요소가 어떻게 보여질지 결정한다.

<svg width="300" height="100" viewBox="0 0 150 50" xmlns="http://www.w3.org/2000/svg">

  <rect x="10" y="10" width="50" height="30" fill="blue" />

  <rect x="80" y="10" width="50" height="30" fill="green" />

</svg>

코드 설명:

• viewBox=”0 0 150 50″은 왼쪽 상단 좌표 (0,0)에서 시작하여 너비 150, 높이 50인 영역을 정의한다.
• 이 viewBox는 width=”300″ height=”100″인 SVG 캔버스에 맞게 자동으로 확장된다.
• 따라서 모든 내용이 2배로 확대되어 보인다.

 

viewBox와 transform을 함께 사용하면 복잡한 확대/축소 및 패닝 효과를 만들 수 있다.

 

💡 SVG 변형 활용 팁:
• transform-origin을 CSS로 설정하여 더 유연한 변형 기준점을 정의할 수 있다
• SVG 애니메이션에 변형을 활용하여 동적 효과 생성
• viewBox와 변형을 조합하여 SVG 요소의 반응형 동작 구현
• 변형 순서에 주의하라 – 순서를 바꾸면 결과가 크게 달라질 수 있다
• 변형 계산을 단순화하기 위해 그룹(<g>)을 활용하라