수색…
통사론
- 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)"/>
첫 번째 값은 각도 (도)입니다. 변환은 시계 방향으로 적용됩니다. 다른 두 값은 회전 할 점을 나타내며 기본값은 원점입니다.
Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow