7장: 기하 속성

SVG의 스타일 속성 외에도, SVG는 기하 속성을 정의합니다. 기하 속성은 그래픽 요소인 ‘circle’, ‘ellipse’, ‘rect’, ‘image’, ‘foreignObject’ 그리고 ‘svg’ 요소의 위치와 크기를 설명합니다.

7.1. 수평 중심 좌표: ‘cx’ 속성

cx 속성은 요소 위치의 수평 중심 좌표를 나타냅니다.

7.2. 수직 중심 좌표: ‘cy’ 속성

cy 속성은 요소 위치의 수직 중심 좌표를 나타냅니다.

7.3. 반지름: ‘r’ 속성

r 속성은 ‘circle’ 요소의 반지름을 나타냅니다.

r에 음수 값이 들어가면 잘못된 값으로 처리해야 합니다.

7.4. 수평 반지름: ‘rx’ 속성

rx 속성은 ‘ellipse’ 요소의 수평 반지름과 ‘rect’ 요소의 곡선 반지름을 나타냅니다. ‘rx’의 계산된 값이 auto일 때, 사용되는 반지름은 ry의 절대 길이와 같아져 원형 곡선이 됩니다. ‘rx’와 ‘ry’ 모두 계산된 값이 auto이면, 사용되는 값은 0입니다.

값이 어떻게 계산되든, ‘rect’의 ‘rx’ 사용 값은 해당 도형의 width 사용 값의 50%를 넘을 수 없습니다.

auto 동작은 ‘ellipse’에서 SVG 2의 신규 기능이며, ‘rect’에서 rx가 명시되지 않았을 때의 동작과 일치합니다.

rx에 음수 값이 들어가면 잘못된 값으로 처리해야 합니다.

7.5. 수직 반지름: ‘ry’ 속성

ry 속성은 ‘ellipse’ 요소의 수직 반지름과 ‘rect’ 요소의 수직 곡선 반지름을 나타냅니다. ‘ry’의 계산된 값이 auto일 때, 사용되는 반지름은 rx의 절대 길이와 같아져 원형 곡선이 됩니다. ‘rx’와 ‘ry’ 모두 계산된 값이 auto이면, 사용되는 값은 0입니다.

값이 어떻게 계산되든, ‘rect’의 ‘ry’ 사용 값은 해당 도형의 height 사용 값의 50%를 넘을 수 없습니다.

auto 동작은 ‘ellipse’에서 SVG 2의 신규 기능이며, ‘rect’에서 ry가 명시되지 않았을 때의 동작과 일치합니다.

ry에 음수 값이 들어가면 잘못된 값으로 처리해야 합니다.

7.6. 수평 좌표: ‘x’ 속성

x 속성은 요소 위치의 수평 좌표를 나타냅니다.

7.7. 수직 좌표: ‘y’ 속성

y 속성은 요소 위치의 수직 좌표를 나타냅니다.

7.8. 크기 속성: ‘width’ 및 ‘height’ 속성의 효과

CSS 2.1 명세의 width 및 height 정의를 참고하세요.

CSS width 및 height 속성은 일부 SVG 요소의 크기를 지정하는 데 사용됩니다. 구체적으로, ‘rect’, ‘svg’, ‘image’, ‘foreignObject’의 크기를 지정합니다. 이 모든 요소에는 ‘width’와 ‘height’ 프레젠테이션 속성이 있습니다. 또한 HTML 네임스페이스에서 임베디드된 요소의 레이아웃에도 사용됩니다.

width의 사용 값은 max-width 및 min-width 속성 값에 의해 제한될 수 있습니다. height의 사용 값 역시 max-height 및 min-height 속성 값에 의해 제한될 수 있습니다.

auto 값이 ‘svg’ 요소의 width, height에 사용되면 100%로 처리됩니다.

auto 값이 ‘image’ 요소의 width, height에 사용되면 참조된 이미지의 내재 크기와 비율을 기준으로 CSS 기본 크기 알고리즘에 따라 계산됩니다.

SVG 2의 신규 기능입니다. SVG에 임베딩된 이미지는 이제 내재 크기에 맞춰 자동 크기 지정이 가능하며, 내재 비율에 따라 고정 높이나 너비로 스케일링할 수 있습니다. 이는 HTML에 임베딩된 이미지의 동작과 일치합니다.

auto 값이 다른 요소의 width, height에 사용되면 0으로 처리됩니다.

예를 들어 ‘foreignObject’ 객체 요소에 auto가 사용되면, 내용에 맞춰 크기가 자동으로 조정되지 않습니다.