수색…
비고
그래픽 요소는 변형 속성을 추가하여 변경할 수 있습니다.
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="30" height="30" transform="translate(10, 10)" />
</svg>
왼쪽 위 원점 대신 좌표 (0, 0)에서 렌더링되는 대신 원점 (10, 10)에서 아래쪽 및 오른쪽으로 표시됩니다.
전체 요소 그룹을 함께 변환 할 수 있으며 변환을 서로 추가 할 수 있습니다.
<svg xmlns="http://www.w3.org/2000/svg">
<g transform="rotate(45)">
<rect x="0" y="0" width="30" height="30" />
<circle cx="5" cy="5" r="5" transform="scale(3)" />
</g>
</svg>
먼저, 원의 모든 점은 원점을 기준으로 요소 3을 사용하여 원의 중심을 (15, 15)의 직사각형 가운데로 가져오고 반경을 15로 설정합니다. 그런 다음 직사각형과 원은 원점을 중심으로 45도 시계 방향으로 함께 회전합니다.
옮기다
직사각형을 오른쪽으로 10 단위 이동하고 아래로 20 단위 이동 :
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="30" height="30" transform="translate(10, 20)" />
</svg>
수평으로 0 단위 이동하고 최대 20 단위 이동 :
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="20" width="30" height="30" transform="translate(0, -20)" />
</svg>
왼쪽으로 10 단위 이동하고 세로로 0 단위로 이동 :
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="0" width="30" height="30" transform="translate(-10)" />
</svg>
규모
직사각형의 가로축을 인수 2로, 수직을 인수 0.5로 스케일합니다.
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="40" height="40" transform="scale(2, 0.5)" />
</svg>
결과는 다음과 같습니다.
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="5" width="80" height="20" />
</svg>
가로로 사각형을 반사 :
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="20" height="40" transform="scale(-1, 1)" />
</svg>
축척은 원점을 기준으로 작동하므로 이것은
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="-20" y="0" width="20" height="40" />
</svg>
회전하다
원점을 기준으로 다각형을 시계 방향으로 90도 회전시킵니다.
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 15,20" transform="rotate(90)" />
</svg>
결과는 다음과 같습니다.
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 0,30 -20,15" />
</svg>
회전 중심은 명시 적으로 주어질 수 있습니다 :
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 15,20" transform="rotate(90, 15, 15)" />
</svg>
결과는 다음과 같습니다.
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="30,0 30,30 10,15" />
</svg>
스큐 X, 스큐 Y
다각형을 45 도씩 수평으로 기울입니다.
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 30,30 0,30" transform="skewX(45)" />
</svg>
결과는 다음과 같습니다.
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 60,30 30,30" />
</svg>
x 값은 x + y * tan(angle) 로 계산되고 y 값은 변경되지 않습니다.
다각형을 30도 기울여서 기울입니다.
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 30,30 0,30" transform="skewY(30)" />
</svg>
결과는 다음과 같습니다 (반올림 허용).
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,17.32 30,47.32 0,30" />
</svg>
x 값은 변경되지 않고 y 값은 y + x * tan(angle) 계산됩니다.
매트릭스
다각형에 변형 행렬 적용 :
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 30,30 0,30" transform="matrix(1,0.6,-1.2,1,40,10)" />
</svg>
모든 점 (x, y)는 다음과 같이 행렬 (a, b, c, d, e, f)를 적용하여 변형됩니다 :
┌ x_new ┐ ┌ a c e ┐ * ┌ x_old ┐ ┌ x_old * a + y_old * c + e ┐
└ y_new ┘ = └ b d f ┘ │ y_old │ = └ x_old * b + y_old * d + f ┘
└ 1 ┘
결과는 다음과 같습니다.
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="40,10 70,28 34,58 4,40" />
</svg>
여러 변형
변환은 연결될 수 있으며 오른쪽에서 왼쪽 으로 적용됩니다.
직사각형을 90도 회전 한 다음 20 단위로 오른쪽으로 이동하고 20 단위로 오른쪽으로 이동하십시오.
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="-10" y="-20" width="20" height="40"
transform="translate(20 20) rotate(90)" />
</svg>
결과는 다음과 같습니다.
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="10" width="40" height="20" />
</svg>