SVG 좌표 시스템

대부분의 컴퓨터 그래픽에서 사용하는 좌표 시스템과 마찬가지로, SVG도 격자 좌표 시스템을 사용합니다. 이 좌표 시스템은 다음과 같은 몇 가지 특징이 있습니다: 좌상단을 좌표 시스템의 기준점(0,0)으로 하며, X축의 긍정 방향은 오른쪽으로, 0,0점에서 오른쪽으로 시작하여 x가 점점 증가합니다. Y축의 긍정 방향은 아래로, 0,0점에서 아래로 시작하여 y가 점점 증가합니다. 좌표는 픽셀 단위로 표시됩니다

SVG( 그리고 대부분의 다른 컴퓨터 그래픽)의 좌표 시스템은 수학, 그래픽 등의 좌표 시스템과 약간 다릅니다.

　수학/笛卡尔 좌표 시스템

직각 좌표 시스템에서, 점 x=0, y=0은 그래픽의 왼하단에 위치합니다. x가 증가함에 따라 점은 좌표 시스템에서 오른쪽으로 이동합니다. x가 감소함에 따라 점은 좌표 시스템에서 왼쪽으로 이동합니다. y가 증가함에 따라 점은 좌표 시스템에서 위로 이동합니다. y가 감소함에 따라 점은 좌표 시스템에서 아래로 이동합니다.

이는 일반 그래픽 좌표 시스템의 도시락입니다. 왼하단이 0,0입니다:

SVG 좌표 시스템

SVG 좌표 시스템에서, 점 x=0, y=0은 왼쪽 상단입니다. 따라서 일반 그래픽 좌표 시스템에 비해 y축은 반대입니다. SVG에서 y가 증가함에 따라 점, 형상 등은 아래로 내려갑니다. 아니라 위로 이동합니다.

이는 SVG 좌표 시스템의 도시락입니다. 왼쪽 상단의 0,0:

좌표 시스템 단위

SVG 좌표 시스템에서 지정할 수 있습니다1단위와 일치하는 단위입니다. 좌표(x와 y 위치, width와 height 등을 지정할 수 있는) 어디서든 이 작업을 수행할 수 있습니다. 값 뒤에 단위를 지정할 수 있습니다. 예를 들어10cm 또는125mm。

좌표 값 후에 단위를 지정하지 않으면 단위는 기본적으로 픽셀(px)로 가정됩니다.

SVG 요소와 함께 사용할 수 있는 단위 목록은 다음과 같습니다:

<svg>의 width와 height 속성에서 요소에 설정된 단위는 해당 <svg> 요소(시각 영역)에 영향을 미칩니다.<svg> 요소 내의 형상은 자신의 단위를 설정해야 합니다. 또한, 단위를 지정하지 않으면 기본 단위는 픽셀(px)입니다.