SVG
변환

통사론

• transform = " [functions] * "
• translate (x [, y])
• 회전 (θ [, x, y])
• 스케일 (x [, y])
• 스큐 X (θ)
• 왜곡 (θ)
• 매트릭스 (a, b, c, d, e, f)

변환 적용

변환 속성을 추가하여 transform 을 요소에 적용 할 수 있습니다.

<circle cx="0" cy="0" r="50" transform="translate(50,50)"/>

또는 <g> 태그로 묶인 요소 그룹 :

<g transform="translate(50,50)">
<circle cx="0" cy="0" r="50"/>
<circle cx="0" cy="0" r="25" fill="white"/>
</g>

같은 요소를 공백으로 구분하여 추가하여 더 많은 변환을 적용 할 수 있습니다.

<circle cx="0" cy="0" r="50" transform="translate(50,50) scale(.5)"/>

변환 함수

옮기다

translate 지정된 벡터를 따라 이동 그래픽을 제공합니다 :

<circle cx="0" cy="0" r="50" transform="translate(50,50)"/>

첫 번째 값은 x 변환이고 두 번째 값은 y입니다. y가 생략되면 기본값은 0입니다.

규모

scale 은 지정된 비율로 요소의 크기를 scale 합니다.

<circle cx="50" cy="50" r="25" transform="scale(.5,2)"/>

translate 와 마찬가지로 인수는 x, y입니다. 그러나 scale 면에서 y가 생략되면 x의 값이 기본값이됩니다. 즉 가로 세로 비율을 변경하지 않고 요소의 크기를 조절합니다.

회전

rotate 지정된 각도만큼 요소를 회전합니다.

<!-- <rect> used for this example because circles can't be rotated -->
<rect width="100" height="5" transform="rotate(90,50,50)"/>

첫 번째 값은 각도 (도)입니다. 변환은 시계 방향으로 적용됩니다. 다른 두 값은 회전 할 점을 나타내며 기본값은 원점입니다.