10장: 기본 도형
목차
10.1. 소개 및 정의10.2. ‘rect’ 요소10.3. ‘circle’ 요소10.4. ‘ellipse’ 요소10.5. ‘line’ 요소10.6. ‘polyline’ 요소10.7. ‘polygon’ 요소10.8. DOM 인터페이스
10.8.1.
SVGRectElement 인터페이스10.8.2.
SVGCircleElement 인터페이스10.8.3.
SVGEllipseElement 인터페이스10.8.4.
SVGLineElement 인터페이스10.8.5.
SVGAnimatedPoints 믹스인10.8.6.
SVGPointList 인터페이스10.8.7.
SVGPolylineElement 인터페이스10.8.8.
SVGPolygonElement 인터페이스
10.1. 소개 및 정의
기본 도형 도형
도형 요소 직선과 곡선의 조합으로 정의되는 그래픽 요소. 구체적으로:
‘circle , ‘ellipse , ‘line , ‘path , ‘polygon , ‘polyline , ‘rect
SVG에는 다음과 같은 기본 도형 요소 집합이 있습니다:
수학적으로, 이러한 도형 요소들은 동일한 형태를 구성하는 ‘path 요소와 동등합니다. 기본 도형들은 외곽선(stroke), 채우기(fill),
클리핑 경로로 사용할 수 있습니다. ‘path
요소에 적용 가능한 모든 속성은 기본 도형에도 적용됩니다.
동등 경로 와 각 도형에 대한 외곽선(stroke) 계산 알고리즘은 아래 도형 섹션에서 정의합니다.
10.2. ‘rect’ 요소
‘rect 요소는 현재 사용자 좌표계 에서 축에 정렬된 사각형을 정의합니다. rx 및 ry 기하 속성에 0이 아닌 값을 지정하면 둥근 사각형을 만들 수 있습니다.
‘rect ’
카테고리:
그래픽 요소 , 렌더링
가능한 요소 , 도형 요소 콘텐츠 모델:
아래 요소 중 아무 순서, 아무 개수로 포함 가능:clipPath marker mask script style
속성:
ARIA 속성 — ‘aria-activedescendant ,
‘aria-atomic ,
‘aria-autocomplete ,
‘aria-busy ,
‘aria-checked ,
‘aria-colcount ,
‘aria-colindex ,
‘aria-colspan ,
‘aria-controls ,
‘aria-current ,
‘aria-describedby ,
‘aria-details ,
‘aria-disabled ,
‘aria-dropeffect ,
‘aria-errormessage ,
‘aria-expanded ,
‘aria-flowto ,
‘aria-grabbed ,
‘aria-haspopup ,
‘aria-hidden ,
‘aria-invalid ,
‘aria-keyshortcuts ,
‘aria-label ,
‘aria-labelledby ,
‘aria-level ,
‘aria-live ,
‘aria-modal ,
‘aria-multiline ,
‘aria-multiselectable ,
‘aria-orientation ,
‘aria-owns ,
‘aria-placeholder ,
‘aria-posinset ,
‘aria-pressed ,
‘aria-readonly ,
‘aria-relevant ,
‘aria-required ,
‘aria-roledescription ,
‘aria-rowcount ,
‘aria-rowindex ,
‘aria-rowspan ,
‘aria-selected ,
‘aria-setsize ,
‘aria-sort ,
‘aria-valuemax ,
‘aria-valuemin ,
‘aria-valuenow ,
‘aria-valuetext ,
‘role 조건 처리 속성 —
‘requiredExtensions ,
‘systemLanguage
코어 속성 — ‘id , ‘tabindex ,
‘lang ,
‘xml:space , ‘class ,
‘style 전역 이벤트
속성 — ‘oncancel , ‘oncanplay , ‘oncanplaythrough ,
‘onchange , ‘onclick , ‘onclose , ‘oncuechange , ‘ondblclick , ‘ondrag , ‘ondragend , ‘ondragenter , ‘ondragexit , ‘ondragleave , ‘ondragover , ‘ondragstart , ‘ondrop , ‘ondurationchange ,
‘onemptied , ‘onended , ‘onerror , ‘onfocus , ‘oninput , ‘oninvalid , ‘onkeydown , ‘onkeypress , ‘onkeyup , ‘onload , ‘onloadeddata , ‘onloadedmetadata ,
‘onloadstart , ‘onmousedown , ‘onmouseenter , ‘onmouseleave , ‘onmousemove , ‘onmouseout , ‘onmouseover , ‘onmouseup , ‘onmousewheel , ‘onpause , ‘onplay , ‘onplaying , ‘onprogress , ‘onratechange , ‘onreset , ‘onresize , ‘onscroll , ‘onseeked , ‘onseeking , ‘onselect , ‘onshow , ‘onstalled , ‘onsubmit , ‘onsuspend , ‘ontimeupdate , ‘ontoggle , ‘onvolumechange , ‘onwaiting 문서
및 요소 이벤트 속성 — ‘oncopy , ‘oncut , ‘onpaste 그래픽 이벤트 속성 —
‘onfocusin , ‘onfocusout 프레젠테이션 속성 —
‘pathLength
기하 속성:
DOM 인터페이스:
x 와 y 좌표는 현재 사용자 좌표계에서 사각형의 왼쪽 및 위쪽 모서리를 나타냅니다.
width 및 height 속성은 사각형의 전체 너비와 높이를 정의합니다.
두 속성 중 하나에 음수 값이 지정되면 잘못된 값으로 간주되며 파싱 오류로
무시되어야 합니다 .
두 치수 중 하나의 계산값이 0이면 해당 요소는 렌더링되지 않습니다.
둥근 사각형의 경우,
rx 와 ry 의 계산값은
사각형 모서리를 마감하는 타원 호의 x축, y축 반지름을 정의합니다.
호는 수평축과 수직축 모두 대칭입니다; 각진 모서리가 다르게 둥글어진 사각형을 만들려면 ‘path 로 도형을 직접 정의하세요.
두 속성 중 하나에 음수 값이 지정되면 잘못된 값으로 간주되며 파싱 오류로
무시되어야 합니다 .
두 치수 중 하나의 계산값이 0이거나, 둘 다 auto이면 각진 모서리가 생성됩니다.
x축, y축 둥근 모서리 반지름의 사용 값은 다른 치수에서 암시적으로 결정될 수 있으며(auto 값 사용),
사각형의 직선 구간 길이가 음수가 되지 않도록 클램핑(clamping)도 적용됩니다.
rx 와 ry 의 사용 값은 아래 순서대로 계산됩니다:
rx 와 ry 가 모두 auto인 경우
(둘 다 초기값이 auto이므로 명시하지 않거나 값이 모두 잘못된 경우에도 발생),
rx 와 ry 의 사용 값은 0입니다. (각진 모서리가 됨)
그렇지 않으면 지정된 값을 절대값으로 변환:
rx 가 길이 또는 백분율이고,
ry 가 auto이면,
rx 의 절대값은 사각형의 사용 width 에 백분율을 적용하여 계산;
ry 의 절대값도 동일하게 적용
ry 가 길이 또는 백분율이고,
rx 가 auto이면,
ry 의 절대값은 사각형의 사용 height 에 백분율을 적용하여 계산;
rx 의 절대값도 동일하게 적용
rx 와 ry 모두 길이 또는 백분율이면,
각각 별도로 절대값을 계산;
rx 의 백분율은 사용 width 에,
ry 의 백분율은 사용 height 에 적용
마지막으로, 클램핑을 적용해 사용 값을 결정:
절대 rx 가 사용 width 의 절반보다 크면,
rx 의 사용 값은 사용 width 의 절반
절대 ry 가 사용 height 의 절반보다 크면,
ry 의 사용 값은 사용 height 의 절반
그 외에는 rx , ry 의 사용 값은 앞서 계산한 절대값
수학적으로, ‘rect 요소는 다음과 같이 동등한
‘path 요소로 매핑됩니다.
위에서와 Units 에 명시된 규칙에 따라 각 기하 속성에 대해 사용자 좌표계의 사용자 단위로 절대 사용 값
x , y , width , height ,
rx , ry
를 생성한 후:
(x+rx ,y ) 위치로 절대 moveto 연산 수행
파라미터 x+width-rx 로 절대 수평 lineto 수행
rx , ry 모두 0보다 크면,
(x+width ,y+ry ) 좌표로 절대 타원 호 연산
수행,
rx , ry 는 타원 호 명령의 파라미터로 사용,
x-axis-rotation 과 large-arc-flag 는 0,
sweep-flag 는 1로 설정
파라미터 y+height-ry 로 절대 수직 lineto 수행
rx , ry 모두 0보다 크면,
(x+width-rx ,y+height ) 좌표로 절대 타원
호 연산 수행(이전과 동일한 파라미터 사용)파라미터 x+rx 로 절대 수평 lineto 수행
rx , ry 모두 0보다 크면,
(x ,y+height-ry ) 좌표로 절대 타원 호 연산
수행(이전과 동일한 파라미터 사용)파라미터 y+ry 로 절대 수직 lineto 수행
rx , ry 모두 0보다 크면,
이전과 동일한 파라미터로 타원 호 및 경로 닫기 연산 수행
경로 분해는 2013년 6월 3일 전화 회의 에서 결정됨.
예시 rect01 은 각진 모서리의 사각형을 보여줍니다. ‘rect 요소는 노란색으로 채워지고 감청색(navy)으로 외곽선이 그려집니다.
<?xml version="1.0" standalone="no"?>
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Example rect01 - rectangle with sharp corners</desc>
<!-- Show outline of viewport using 'rect' element -->
<rect x="1" y="1" width="1198" height="398"
fill="none" stroke="blue" stroke-width="2"/>
<rect x="400" y="100" width="400" height="200"
fill="yellow" stroke="navy" stroke-width="10" />
</svg>
이 예시를 SVG로 보기
(SVG 지원 브라우저만)
예시 rect02 는 두 개의 둥근 사각형을 보여줍니다. rx 는 사각형의 모서리를 어떻게 둥글게 할지 지정합니다. ry 속성 값이 지정되지 않았으므로, 사용 값은 rx 속성에서 파생됩니다.
<?xml version="1.0" standalone="no"?>
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Example rect02 - rounded rectangles</desc>
<!-- Show outline of viewport using 'rect' element -->
<rect x="1" y="1" width="1198" height="398"
fill="none" stroke="blue" stroke-width="2"/>
<rect x="100" y="100" width="400" height="200" rx="50"
fill="green" />
<g transform="translate(700 210) rotate(-30)">
<rect x="0" y="0" width="400" height="200" rx="50"
fill="none" stroke="purple" stroke-width="30" />
</g>
</svg>
이 예시를 SVG로 보기
(SVG 지원 브라우저만)
10.3. ‘circle’ 요소
‘circle 요소는 중심점과 반지름을
기반으로 원을 정의합니다.
‘circle ’
범주:
그래픽 요소 , 렌더링
가능한 요소 , 도형 요소 콘텐츠 모델:
다음 요소들을 임의의 순서로 임의의 개수 포함할 수 있습니다:clipPath marker mask script style
속성:
aria 속성 — ‘aria-activedescendant ,
‘aria-atomic ,
‘aria-autocomplete ,
‘aria-busy ,
‘aria-checked ,
‘aria-colcount ,
‘aria-colindex ,
‘aria-colspan ,
‘aria-controls ,
‘aria-current ,
‘aria-describedby ,
‘aria-details ,
‘aria-disabled ,
‘aria-dropeffect ,
‘aria-errormessage ,
‘aria-expanded ,
‘aria-flowto ,
‘aria-grabbed ,
‘aria-haspopup ,
‘aria-hidden ,
‘aria-invalid ,
‘aria-keyshortcuts ,
‘aria-label ,
‘aria-labelledby ,
‘aria-level ,
‘aria-live ,
‘aria-modal ,
‘aria-multiline ,
‘aria-multiselectable ,
‘aria-orientation ,
‘aria-owns ,
‘aria-placeholder ,
‘aria-posinset ,
‘aria-pressed ,
‘aria-readonly ,
‘aria-relevant ,
‘aria-required ,
‘aria-roledescription ,
‘aria-rowcount ,
‘aria-rowindex ,
‘aria-rowspan ,
‘aria-selected ,
‘aria-setsize ,
‘aria-sort ,
‘aria-valuemax ,
‘aria-valuemin ,
‘aria-valuenow ,
‘aria-valuetext ,
‘role 조건부 처리 속성 —
‘requiredExtensions ,
‘systemLanguage
코어 속성 — ‘id , ‘tabindex ,
‘lang ,
‘xml:space , ‘class ,
‘style 글로벌
이벤트 속성 — ‘oncancel , ‘oncanplay , ‘oncanplaythrough ,
‘onchange , ‘onclick , ‘onclose , ‘oncuechange , ‘ondblclick , ‘ondrag , ‘ondragend , ‘ondragenter , ‘ondragexit , ‘ondragleave , ‘ondragover , ‘ondragstart , ‘ondrop , ‘ondurationchange ,
‘onemptied , ‘onended , ‘onerror , ‘onfocus , ‘oninput , ‘oninvalid , ‘onkeydown , ‘onkeypress , ‘onkeyup , ‘onload , ‘onloadeddata , ‘onloadedmetadata ,
‘onloadstart , ‘onmousedown , ‘onmouseenter , ‘onmouseleave , ‘onmousemove , ‘onmouseout , ‘onmouseover , ‘onmouseup , ‘onmousewheel , ‘onpause , ‘onplay , ‘onplaying , ‘onprogress , ‘onratechange , ‘onreset , ‘onresize , ‘onscroll , ‘onseeked , ‘onseeking , ‘onselect , ‘onshow , ‘onstalled , ‘onsubmit , ‘onsuspend , ‘ontimeupdate , ‘ontoggle , ‘onvolumechange , ‘onwaiting 문서
요소 이벤트 속성 — ‘oncopy , ‘oncut , ‘onpaste 그래픽 이벤트 속성 —
‘onfocusin , ‘onfocusout 프리젠테이션 속성 —
‘pathLength
기하학적 속성:
DOM 인터페이스:
cx 및 cy 속성은 원의 중심 좌표를 정의합니다.
r 속성은 원의 반지름을 정의합니다.
두 속성 중 하나에 음수 값이 있으면 잘못된 값이며 구문 분석 오류로 무시되어야
합니다 .
수학적으로, ‘circle 요소는
동등한 ‘path 요소로 매핑되며, 이 요소는
원의 1/4씩을 차지하는 네 개의
타원 호 세그먼트로 구성됩니다. 경로는 반지름의 "3시 방향" 지점에서 시작해 시계 방향(모든 변환
이전)에 따라 진행됩니다.
rx 및 ry 파라미터는 r 속성의 사용 값과 동일하며, 로컬
사용자 단위로 변환된 값입니다.
x-axis-rotation ,
large-arc-flag ,
sweep-flag 는 모두 0으로 설정됩니다.
좌표는 다음과 같이 계산됩니다.
cx , cy , r 는 해당 속성의 사용자 단위로 변환된 사용 값입니다:
점 cx+r ,cy 로 이동하는 명령;
cx ,cy+r 로 호;cx-r ,cy 로 호;cx ,cy-r 로 호;세그먼트-완성 닫힘 경로 동작을 가진 호;
경로 분해는 2013년 6월 3일 전화 회의 중에 합의되었습니다.
예제
circle01 은 빨간색으로 채워지고 파란색으로 외곽선 처리된 ‘circle 요소로 구성됩니다.
<?xml version="1.0" standalone="no"?>
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>예제 circle01 - 빨간색으로 채워지고 파란색으로 외곽선 처리된 circle</desc>
<!-- 'rect' 요소를 사용해 뷰포트 외곽선 표시 -->
<rect x="1" y="1" width="1198" height="398"
fill="none" stroke="blue" stroke-width="2"/>
<circle cx="600" cy="200" r="100"
fill="red" stroke="blue" stroke-width="10" />
</svg>
이 예제를 SVG로 보기 (SVG 지원 브라우저에서만)
10.4. ‘ellipse’ 요소
‘ellipse 요소는 중심점과 두 반지름을
기준으로, 현재 사용자 좌표계 에 축이 맞춰진 타원을
정의합니다.
‘ellipse ’
범주:
그래픽 요소 , 렌더링
가능한 요소 , 도형 요소 콘텐츠 모델:
다음 요소를 임의의 순서로 임의의 개수 포함할 수 있습니다:clipPath marker mask script style
속성:
aria 속성 — ‘aria-activedescendant ,
‘aria-atomic ,
‘aria-autocomplete ,
‘aria-busy ,
‘aria-checked ,
‘aria-colcount ,
‘aria-colindex ,
‘aria-colspan ,
‘aria-controls ,
‘aria-current ,
‘aria-describedby ,
‘aria-details ,
‘aria-disabled ,
‘aria-dropeffect ,
‘aria-errormessage ,
‘aria-expanded ,
‘aria-flowto ,
‘aria-grabbed ,
‘aria-haspopup ,
‘aria-hidden ,
‘aria-invalid ,
‘aria-keyshortcuts ,
‘aria-label ,
‘aria-labelledby ,
‘aria-level ,
‘aria-live ,
‘aria-modal ,
‘aria-multiline ,
‘aria-multiselectable ,
‘aria-orientation ,
‘aria-owns ,
‘aria-placeholder ,
‘aria-posinset ,
‘aria-pressed ,
‘aria-readonly ,
‘aria-relevant ,
‘aria-required ,
‘aria-roledescription ,
‘aria-rowcount ,
‘aria-rowindex ,
‘aria-rowspan ,
‘aria-selected ,
‘aria-setsize ,
‘aria-sort ,
‘aria-valuemax ,
‘aria-valuemin ,
‘aria-valuenow ,
‘aria-valuetext ,
‘role 조건부 처리 속성 —
‘requiredExtensions ,
‘systemLanguage
코어 속성 — ‘id , ‘tabindex ,
‘lang ,
‘xml:space , ‘class ,
‘style 글로벌
이벤트 속성 — ‘oncancel , ‘oncanplay , ‘oncanplaythrough ,
‘onchange , ‘onclick , ‘onclose , ‘oncuechange , ‘ondblclick , ‘ondrag , ‘ondragend , ‘ondragenter , ‘ondragexit , ‘ondragleave , ‘ondragover , ‘ondragstart , ‘ondrop , ‘ondurationchange ,
‘onemptied , ‘onended , ‘onerror , ‘onfocus , ‘oninput , ‘oninvalid , ‘onkeydown , ‘onkeypress , ‘onkeyup , ‘onload , ‘onloadeddata , ‘onloadedmetadata ,
‘onloadstart , ‘onmousedown , ‘onmouseenter , ‘onmouseleave , ‘onmousemove , ‘onmouseout , ‘onmouseover , ‘onmouseup , ‘onmousewheel , ‘onpause , ‘onplay , ‘onplaying , ‘onprogress , ‘onratechange , ‘onreset , ‘onresize , ‘onscroll , ‘onseeked , ‘onseeking , ‘onselect , ‘onshow , ‘onstalled , ‘onsubmit , ‘onsuspend , ‘ontimeupdate , ‘ontoggle , ‘onvolumechange , ‘onwaiting 문서
요소 이벤트 속성 — ‘oncopy , ‘oncut , ‘onpaste 그래픽 이벤트 속성 —
‘onfocusin , ‘onfocusout 프레젠테이션 속성 —
‘pathLength
기하 속성:
DOM 인터페이스:
cx 및 cy 좌표는 타원의 중심을 정의합니다.
rx 및 ry 속성은 타원의 x축과 y축 반지름을 정의합니다.
두 속성 중 하나에 음수 값이 있으면 잘못된 값이며 구문 분석 오류로 무시되어야
합니다 .
두 치수 중 하나의 계산된 값이 0이거나, 둘 다 auto로 계산된 경우, 요소의 렌더링이 비활성화됩니다.
rx 또는 ry 중 하나라도 auto 값이면,
위에서 사각형에 대해 제시된 규칙을 따라 사용 값으로 변환됩니다
(width 또는 height 에 기반한 클램핑 없이).
사실상, auto 값은 한 치수만으로 정의된 반지름을 갖는 원형 형태를 생성하며,
아래와 같은 방식으로 반지름이 정의된 원을 만들 수 있습니다:
좌표계 width 의 백분율; 즉, rx 에 백분율 값, ry 에 auto 값.
좌표계 height 의 백분율; 즉, rx 에 auto 값,
ry 에 백분율 값.
SVG 2에 새로 추가됨.
rx 와 ry 의 auto 값은
타원과 사각형 모두에서 이러한 속성을 일관되게 구문 분석할 수 있도록 추가되었습니다.
이전에는 rx 또는 ry 중 하나라도 지정되지 않으면,
타원이 렌더링되지 않았습니다.
수학적으로, ‘ellipse 요소는
동등한 ‘path 요소로 매핑되며,
이는 타원의 1/4씩을 차지하는 네 개의 타원 호 세그먼트로 구성됩니다.
경로는 반지름의 "3시 방향" 지점에서 시작해 시계 방향(모든 변환 전)에 따라 진행됩니다.
arc 명령의 rx 및 ry 파라미터는 해당 속성의 사용자 단위로 변환된 사용 값입니다.
x-axis-rotation ,
large-arc-flag ,
sweep-flag 는 모두 0으로 설정됩니다.
좌표는 다음과 같이 계산됩니다.
cx , cy , rx , ry 는 해당 속성의 사용자 단위로 변환된 사용 값입니다:
점 cx+rx ,cy 로 이동하는 명령;
cx ,cy+ry 로 호;cx-rx ,cy 로 호;cx ,cy-ry 로 호;세그먼트-완성 닫힘 경로 동작을 가진 호;
경로 분해는 2013년 6월 3일 전화 회의 중에 합의되었습니다.
예제 ellipse01 은 아래에서
사용자 좌표계에서 두 타원의 좌표를 지정하며,
‘viewBox 속성이 ‘svg
요소에 설정되고, transform 속성이 ‘g 및
‘ellipse 요소에 적용됩니다. 두
타원 모두
cx 및 cy 속성의 기본값(타원의 중심)을 사용합니다. 두 번째 타원은 회전되어 있습니다.
<?xml version="1.0" standalone="no"?>
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>예제 ellipse01 - 타원 예시</desc>
<!-- 'rect' 요소로 뷰포트 외곽선 표시 -->
<rect x="1" y="1" width="1198" height="398"
fill="none" stroke="blue" stroke-width="2" />
<g transform="translate(300 200)">
<ellipse rx="250" ry="100"
fill="red" />
</g>
<ellipse transform="translate(900 200) rotate(-30)"
rx="250" ry="100"
fill="none" stroke="blue" stroke-width="20" />
</svg>
이 예제를 SVG로 보기 (SVG 지원 브라우저에서만)
10.5. ‘line’ 요소
‘line 요소는 한 점에서 시작해서 다른 점에서
끝나는 선분을 정의합니다.
‘line ’
범주:
그래픽 요소 , 렌더링
요소 , 도형 요소 콘텐츠 모델:
다음 요소들을 임의의 순서로 임의의 개수 포함할 수 있습니다:clipPath marker mask script style
속성:
aria 속성 — ‘aria-activedescendant ,
‘aria-atomic ,
‘aria-autocomplete ,
‘aria-busy ,
‘aria-checked ,
‘aria-colcount ,
‘aria-colindex ,
‘aria-colspan ,
‘aria-controls ,
‘aria-current ,
‘aria-describedby ,
‘aria-details ,
‘aria-disabled ,
‘aria-dropeffect ,
‘aria-errormessage ,
‘aria-expanded ,
‘aria-flowto ,
‘aria-grabbed ,
‘aria-haspopup ,
‘aria-hidden ,
‘aria-invalid ,
‘aria-keyshortcuts ,
‘aria-label ,
‘aria-labelledby ,
‘aria-level ,
‘aria-live ,
‘aria-modal ,
‘aria-multiline ,
‘aria-multiselectable ,
‘aria-orientation ,
‘aria-owns ,
‘aria-placeholder ,
‘aria-posinset ,
‘aria-pressed ,
‘aria-readonly ,
‘aria-relevant ,
‘aria-required ,
‘aria-roledescription ,
‘aria-rowcount ,
‘aria-rowindex ,
‘aria-rowspan ,
‘aria-selected ,
‘aria-setsize ,
‘aria-sort ,
‘aria-valuemax ,
‘aria-valuemin ,
‘aria-valuenow ,
‘aria-valuetext ,
‘role 조건부 처리 속성 —
‘requiredExtensions ,
‘systemLanguage
코어 속성 — ‘id , ‘tabindex ,
‘lang ,
‘xml:space , ‘class ,
‘style 글로벌
이벤트 속성 — ‘oncancel , ‘oncanplay , ‘oncanplaythrough ,
‘onchange , ‘onclick , ‘onclose , ‘oncuechange , ‘ondblclick , ‘ondrag , ‘ondragend , ‘ondragenter , ‘ondragexit , ‘ondragleave , ‘ondragover , ‘ondragstart , ‘ondrop , ‘ondurationchange ,
‘onemptied , ‘onended , ‘onerror , ‘onfocus , ‘oninput , ‘oninvalid , ‘onkeydown , ‘onkeypress , ‘onkeyup , ‘onload , ‘onloadeddata , ‘onloadedmetadata ,
‘onloadstart , ‘onmousedown , ‘onmouseenter , ‘onmouseleave , ‘onmousemove , ‘onmouseout , ‘onmouseover , ‘onmouseup , ‘onmousewheel , ‘onpause , ‘onplay , ‘onplaying , ‘onprogress , ‘onratechange , ‘onreset , ‘onresize , ‘onscroll , ‘onseeked , ‘onseeking , ‘onselect , ‘onshow , ‘onstalled , ‘onsubmit , ‘onsuspend , ‘ontimeupdate , ‘ontoggle , ‘onvolumechange , ‘onwaiting 문서
요소 이벤트 속성 — ‘oncopy , ‘oncut , ‘onpaste 그래픽 이벤트 속성 —
‘onfocusin , ‘onfocusout 프리젠테이션 속성 —
‘pathLength ‘x1 ‘y1 ‘x2 ‘y2
DOM 인터페이스:
속성 정의:
선의 시작점 x축 및 y축 좌표.
선의 끝점 x축 및 y축 좌표.
향후 규격에서는 ‘x1 ,
‘y1 , ‘x2 , ‘y2 속성을 기하 속성으로 변환할
수 있습니다.
현재는 요소 속성으로만 지정할 수 있으며, CSS로는 지정할 수 없습니다.
수학적으로, ‘line
요소는 아래와 같이 동등한 ‘path 요소로
매핑될 수 있습니다.
좌표를 단위 에 따라 사용자 좌표계 사용자 단위로 변환하여
x1 , y1 , x2 , y2 값을 생성한 후:
‘line 요소는 1차원 도형이므로 내부가
없습니다. 따라서 ‘line 요소는 채워지지
않습니다 ( fill 속성 참고).
예제 line01 은 아래에서
‘viewBox 속성이 ‘svg 요소에 설정되어
사용자 좌표계가 정의된 상태에서 다섯 개의 직선 좌표를 지정합니다. 각 선들은 두께가 다릅니다.
<?xml version="1.0" standalone="no"?>
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>예제 line01 - 사용자 좌표계로 표현된 여러 선</desc>
<!-- 'rect' 요소로 뷰포트 외곽선 표시 -->
<rect x="1" y="1" width="1198" height="398"
fill="none" stroke="blue" stroke-width="2" />
<g stroke="green" >
<line x1="100" y1="300" x2="300" y2="100"
stroke-width="5" />
<line x1="300" y1="300" x2="500" y2="100"
stroke-width="10" />
<line x1="500" y1="300" x2="700" y2="100"
stroke-width="15" />
<line x1="700" y1="300" x2="900" y2="100"
stroke-width="20" />
<line x1="900" y1="300" x2="1100" y2="100"
stroke-width="25" />
</g>
</svg>
이 예제를 SVG로 보기 (SVG 지원 브라우저에서만)
10.6. ‘polyline’ 요소
‘polyline 요소는 연결된 직선 선분
집합을 정의합니다. 일반적으로 ‘polyline 요소는 열린 도형을 정의합니다.
‘polyline ’
카테고리:
그래픽 요소 , 렌더링
가능한 요소 , 도형 요소 콘텐츠 모델:
아래 요소를 임의의 순서, 임의의 개수로 포함할 수 있음:clipPath marker mask script style
속성:
ARIA 속성 — ‘aria-activedescendant ,
‘aria-atomic ,
‘aria-autocomplete ,
‘aria-busy ,
‘aria-checked ,
‘aria-colcount ,
‘aria-colindex ,
‘aria-colspan ,
‘aria-controls ,
‘aria-current ,
‘aria-describedby ,
‘aria-details ,
‘aria-disabled ,
‘aria-dropeffect ,
‘aria-errormessage ,
‘aria-expanded ,
‘aria-flowto ,
‘aria-grabbed ,
‘aria-haspopup ,
‘aria-hidden ,
‘aria-invalid ,
‘aria-keyshortcuts ,
‘aria-label ,
‘aria-labelledby ,
‘aria-level ,
‘aria-live ,
‘aria-modal ,
‘aria-multiline ,
‘aria-multiselectable ,
‘aria-orientation ,
‘aria-owns ,
‘aria-placeholder ,
‘aria-posinset ,
‘aria-pressed ,
‘aria-readonly ,
‘aria-relevant ,
‘aria-required ,
‘aria-roledescription ,
‘aria-rowcount ,
‘aria-rowindex ,
‘aria-rowspan ,
‘aria-selected ,
‘aria-setsize ,
‘aria-sort ,
‘aria-valuemax ,
‘aria-valuemin ,
‘aria-valuenow ,
‘aria-valuetext ,
‘role 조건 처리 속성 —
‘requiredExtensions ,
‘systemLanguage
코어 속성 — ‘id , ‘tabindex ,
‘lang ,
‘xml:space , ‘class ,
‘style 전역 이벤트
속성 — ‘oncancel , ‘oncanplay , ‘oncanplaythrough ,
‘onchange , ‘onclick , ‘onclose , ‘oncuechange , ‘ondblclick , ‘ondrag , ‘ondragend , ‘ondragenter , ‘ondragexit , ‘ondragleave , ‘ondragover , ‘ondragstart , ‘ondrop , ‘ondurationchange ,
‘onemptied , ‘onended , ‘onerror , ‘onfocus , ‘oninput , ‘oninvalid , ‘onkeydown , ‘onkeypress , ‘onkeyup , ‘onload , ‘onloadeddata , ‘onloadedmetadata ,
‘onloadstart , ‘onmousedown , ‘onmouseenter , ‘onmouseleave , ‘onmousemove , ‘onmouseout , ‘onmouseover , ‘onmouseup , ‘onmousewheel , ‘onpause , ‘onplay , ‘onplaying , ‘onprogress , ‘onratechange , ‘onreset , ‘onresize , ‘onscroll , ‘onseeked , ‘onseeking , ‘onselect , ‘onshow , ‘onstalled , ‘onsubmit , ‘onsuspend , ‘ontimeupdate , ‘ontoggle , ‘onvolumechange , ‘onwaiting 문서
및 요소 이벤트 속성 — ‘oncopy , ‘oncut , ‘onpaste 그래픽 이벤트 속성 —
‘onfocusin , ‘onfocusout 프레젠테이션 속성 —
‘pathLength ‘points
DOM 인터페이스:
속성 정의:
이름
값
초기값
애니메이션 가능
points <points> (없음)
예
설명:
polyline을 구성하는 점들. 모든 좌표 값은 사용자 좌표계 기준입니다.
좌표가 홀수 개 제공되면 요소는 오류 상태가 되며, 잘못 지정된 ‘path 요소와 동일한 사용자 에이전트 동작이 발생합니다. 이런 오류
상황에서는 사용자 에이전트가 마지막 홀수 좌표를 버리고 나머지로 도형을 렌더링합니다.
초기값 (없음)은 polyline 요소가 유효하지만 렌더링되지 않음을 의미합니다.
향후 명세에서는 ‘points 속성을 기하 속성으로 전환할 수
있습니다.
현재로서는 요소 속성으로만 지정할 수 있으며, CSS에서는 지정할 수 없습니다.
수학적으로, ‘polyline 요소는
다음과 같이 동등한 ‘path 요소로 매핑됩니다:
점 목록의 첫 좌표쌍 위치로 절대 moveto 연산 수행
이후 각 좌표쌍에 대해 해당 좌표쌍 위치로 절대 lineto 연산 수행
예시 polyline01
아래는 ‘svg 요소의 ‘viewBox 속성으로 설정된 사용자 좌표계
내에서 polyline을 지정합니다.
<?xml version="1.0" standalone="no"?>
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Example polyline01 - increasingly larger bars</desc>
<!-- Show outline of viewport using 'rect' element -->
<rect x="1" y="1" width="1198" height="398"
fill="none" stroke="blue" stroke-width="2" />
<polyline fill="none" stroke="blue" stroke-width="10"
points="50,375
150,375 150,325 250,325 250,375
350,375 350,250 450,250 450,375
550,375 550,175 650,175 650,375
750,375 750,100 850,100 850,375
950,375 950,25 1050,25 1050,375
1150,375" />
</svg>
이 예시를 SVG로 보기
(SVG 지원 브라우저만)
10.7. ‘polygon’ 요소
‘polygon 요소는 연결된 직선 선분
집합으로 이루어진 닫힌 도형을 정의합니다.
‘polygon ’
카테고리:
그래픽 요소 , 렌더링
가능한 요소 , 도형 요소 콘텐츠 모델:
아래 요소를 임의의 순서, 임의의 개수로 포함할 수 있음:clipPath marker mask script style
속성:
ARIA 속성 — ‘aria-activedescendant ,
‘aria-atomic ,
‘aria-autocomplete ,
‘aria-busy ,
‘aria-checked ,
‘aria-colcount ,
‘aria-colindex ,
‘aria-colspan ,
‘aria-controls ,
‘aria-current ,
‘aria-describedby ,
‘aria-details ,
‘aria-disabled ,
‘aria-dropeffect ,
‘aria-errormessage ,
‘aria-expanded ,
‘aria-flowto ,
‘aria-grabbed ,
‘aria-haspopup ,
‘aria-hidden ,
‘aria-invalid ,
‘aria-keyshortcuts ,
‘aria-label ,
‘aria-labelledby ,
‘aria-level ,
‘aria-live ,
‘aria-modal ,
‘aria-multiline ,
‘aria-multiselectable ,
‘aria-orientation ,
‘aria-owns ,
‘aria-placeholder ,
‘aria-posinset ,
‘aria-pressed ,
‘aria-readonly ,
‘aria-relevant ,
‘aria-required ,
‘aria-roledescription ,
‘aria-rowcount ,
‘aria-rowindex ,
‘aria-rowspan ,
‘aria-selected ,
‘aria-setsize ,
‘aria-sort ,
‘aria-valuemax ,
‘aria-valuemin ,
‘aria-valuenow ,
‘aria-valuetext ,
‘role 조건 처리 속성 —
‘requiredExtensions ,
‘systemLanguage
코어 속성 — ‘id , ‘tabindex ,
‘lang ,
‘xml:space , ‘class ,
‘style 전역 이벤트
속성 — ‘oncancel , ‘oncanplay , ‘oncanplaythrough ,
‘onchange , ‘onclick , ‘onclose , ‘oncuechange , ‘ondblclick , ‘ondrag , ‘ondragend , ‘ondragenter , ‘ondragexit , ‘ondragleave , ‘ondragover , ‘ondragstart , ‘ondrop , ‘ondurationchange ,
‘onemptied , ‘onended , ‘onerror , ‘onfocus , ‘oninput , ‘oninvalid , ‘onkeydown , ‘onkeypress , ‘onkeyup , ‘onload , ‘onloadeddata , ‘onloadedmetadata ,
‘onloadstart , ‘onmousedown , ‘onmouseenter , ‘onmouseleave , ‘onmousemove , ‘onmouseout , ‘onmouseover , ‘onmouseup , ‘onmousewheel , ‘onpause , ‘onplay , ‘onplaying , ‘onprogress , ‘onratechange , ‘onreset , ‘onresize , ‘onscroll , ‘onseeked , ‘onseeking , ‘onselect , ‘onshow , ‘onstalled , ‘onsubmit , ‘onsuspend , ‘ontimeupdate , ‘ontoggle , ‘onvolumechange , ‘onwaiting 문서
및 요소 이벤트 속성 — ‘oncopy , ‘oncut , ‘onpaste 그래픽 이벤트 속성 —
‘onfocusin , ‘onfocusout 프레젠테이션 속성 —
‘pathLength ‘points
DOM 인터페이스:
속성 정의:
이름
값
초기값
애니메이션 가능
points <points> (없음)
예
polygon을 구성하는 점들. 모든 좌표 값은 사용자 좌표계 기준입니다.
좌표가 홀수 개 제공되면 요소는 오류 상태가 되며, 잘못 지정된 ‘path 요소와 동일한 사용자 에이전트 동작이 발생합니다.
초기값 (없음)은 polygon 요소가 유효하지만 렌더링되지 않음을 의미합니다.
향후 명세에서는 ‘points 속성을 기하 속성으로 전환할 수 있습니다.
현재로서는 요소 속성으로만 지정할 수 있으며, CSS에서는 지정할 수 없습니다.
수학적으로, ‘polygon 요소는 다음과
같이 동등한 ‘path 요소로 매핑됩니다:
예시
polygon01 아래는 ‘svg 요소의 ‘viewBox 속성으로 설정된 사용자 좌표계 내에서 두 개의
polygon(별과 육각형)을 지정합니다.
<?xml version="1.0" standalone="no"?>
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Example polygon01 - star and hexagon</desc>
<!-- Show outline of viewport using 'rect' element -->
<rect x="1" y="1" width="1198" height="398"
fill="none" stroke="blue" stroke-width="2" />
<polygon fill="red" stroke="blue" stroke-width="10"
points="350,75 379,161 469,161 397,215
423,301 350,250 277,301 303,215
231,161 321,161" />
<polygon fill="lime" stroke="blue" stroke-width="10"
points="850,75 958,137.5 958,262.5
850,325 742,262.6 742,137.5" />
</svg>
이 예시를 SVG로 보기
(SVG 지원 브라우저만)
10.8. DOM 인터페이스
10.8.1. SVGRectElement 인터페이스
SVGRectElement 객체는 DOM에서 ‘rect 요소를 나타냅니다.
[Exposed=Window]
interface SVGRectElement : SVGGeometryElement {
[SameObject] readonly attribute SVGAnimatedLength x ;
[SameObject] readonly attribute SVGAnimatedLength y ;
[SameObject] readonly attribute SVGAnimatedLength width ;
[SameObject] readonly attribute SVGAnimatedLength height ;
[SameObject] readonly attribute SVGAnimatedLength rx ;
[SameObject] readonly attribute SVGAnimatedLength ry ;
};
x ,
y ,
width ,
height ,
rx 및
ry IDL 속성은
각각 x , y ,
width , height , rx 및
ry
속성 및 그에 대응하는 프레젠테이션 속성의 계산값을 반영 합니다.
10.8.2. SVGCircleElement 인터페이스
SVGCircleElement 객체는 DOM에서 ‘circle 요소를 나타냅니다.
[Exposed=Window]
interface SVGCircleElement : SVGGeometryElement {
[SameObject] readonly attribute SVGAnimatedLength cx ;
[SameObject] readonly attribute SVGAnimatedLength cy ;
[SameObject] readonly attribute SVGAnimatedLength r ;
};
cx ,
cy , r IDL 속성은
각각 cx , cy
및 y 속성 및 그에 대응하는 프레젠테이션 속성의 계산값을 반영 합니다.
10.8.3. SVGEllipseElement 인터페이스
SVGEllipseElement 객체는 DOM에서 ‘ellipse 요소를 나타냅니다.
[Exposed=Window]
interface SVGEllipseElement : SVGGeometryElement {
[SameObject] readonly attribute SVGAnimatedLength cx ;
[SameObject] readonly attribute SVGAnimatedLength cy ;
[SameObject] readonly attribute SVGAnimatedLength rx ;
[SameObject] readonly attribute SVGAnimatedLength ry ;
};
cx ,
cy ,
rx ,
ry
IDL 속성은 각각 cx , cy , rx , ry 속성 및 그에 대응하는 프레젠테이션 속성의 계산값을 반영 합니다.
10.8.4. SVGLineElement 인터페이스
SVGLineElement 인터페이스는 ‘line 요소에 해당합니다.
[Exposed=Window]
interface SVGLineElement : SVGGeometryElement {
[SameObject] readonly attribute SVGAnimatedLength x1 ;
[SameObject] readonly attribute SVGAnimatedLength y1 ;
[SameObject] readonly attribute SVGAnimatedLength x2 ;
[SameObject] readonly attribute SVGAnimatedLength y2 ;
};
x1 ,
y1 ,
x2 ,
y2 IDL 속성은 각각 ‘x1 , ‘y1 , ‘x2 , ‘y2 콘텐츠 속성의 값을 반영 합니다.
10.8.5. SVGAnimatedPoints 믹스인
SVGAnimatedPoints 인터페이스는 ‘points
속성을 반영 하기 위해 사용됩니다. 이 인터페이스는 SVGPolygonElement 및 SVGPolylineElement 인터페이스에 믹스인됩니다.
참고: SVG 1.1 SE에서는 animatedPoints 속성이 현재
애니메이션 값을 나타냈습니다. 이 버전의 SVG에서는 points 의 별칭일 뿐입니다.
interface mixin SVGAnimatedPoints {
[SameObject] readonly attribute SVGPointList points ;
[SameObject] readonly attribute SVGPointList animatedPoints ;
};
points 및 animatedPoints IDL 속성은 반영된 속성의 현재 비애니메이션 값을 나타냅니다. points 또는 animatedPoints 를 가져올 때, 해당 속성의 기본값을 반영하는 SVGPointList 객체가 반환됩니다.
10.8.6. SVGPointList 인터페이스
SVGPointList 인터페이스는 목록 인터페이스 이며, 각 원소는 DOMPoint 객체입니다. SVGPointList 객체는 점 목록을 나타냅니다.
[Exposed=Window]
interface SVGPointList {
readonly attribute unsigned long length ;
readonly attribute unsigned long numberOfItems ;
void clear ();
DOMPoint initialize (DOMPoint newItem);
getter DOMPoint getItem (unsigned long index);
DOMPoint insertItemBefore (DOMPoint newItem, unsigned long index);
DOMPoint replaceItem (DOMPoint newItem, unsigned long index);
DOMPoint removeItem (unsigned long index);
DOMPoint appendItem (DOMPoint newItem);
setter void (unsigned long index, DOMPoint newItem);
};
SVGPointList 의 모든 인터페이스 멤버 동작은 목록 인터페이스 에서 정의됩니다.
이 명세는 DOMPoint 객체의 동작에
대해 Geometry Interfaces
명세에서 설명된 것 이상의 요구사항을 추가로 부과하며, 이는 ‘points 속성을 반영할 수 있도록 하기
위함입니다.
DOMPoint 객체는 특정 요소와 연관(associated) 될 수
있습니다. 연관된 요소는 해당 객체가 속성을 반영 할 때 어느 요소의 콘텐츠 속성을 업데이트할지 결정하는 데 사용됩니다. 별도의
설명이 없는 한, DOMPoint 객체는 어떤
요소와도 연관되어 있지 않습니다.
DOMPoint
객체는 읽기 전용(read only) 으로 지정될 수 있으며, 객체를 수정하려고 하면 예외가 발생합니다. 읽기 전용 DOMPoint 의 x ,
y ,
w 또는
z
IDL 속성에 할당할 때, 내부 좌표 값을 업데이트하는 대신 NoModificationAllowedError 가 throw 되어야 합니다.
이 규칙은 읽기-쓰기 DOMPoint 인터페이스에만 적용됩니다. ‘points
속성을 반영하지 않는 DOMPointReadOnly 인터페이스는 이미 수정 시 예외를
발생시킵니다.
쓰기 가능한 DOMPoint 의 x ,
y ,
w 또는
z
IDL 속성에 할당할 때, 내부 좌표 값을 업데이트한 후 다음 단계를 실행합니다:
DOMPoint 가 반영된 속성의 기본값의 원소를 반영 한다면, 해당 속성의 기본값을 반영하는 SVGPointList 를 사용해 속성을 재직렬화(reserialize) 합니다.
그 외에 DOMPoint 가 SVG 요소의 현재 변환을 나타내고 그 요소가 최상위
svg 요소 라면:
[a b c d e f ] 행렬이 문서의 확대 및 패닝
변환을 나타냅니다.
x , y 는 DOMPoint 객체의 x, y 좌표입니다.
문서의 확대 및 패닝 변환을 [a 0 0 d x y ]로 설정합니다.
10.8.7. SVGPolylineElement 인터페이스
SVGPolylineElement 객체는 DOM에서 ‘polyline 요소를 나타냅니다.
[Exposed=Window]
interface SVGPolylineElement : SVGGeometryElement {
};
SVGPolylineElement includes SVGAnimatedPoints ;
10.8.8. SVGPolygonElement 인터페이스
SVGPolygonElement 객체는 DOM에서 ‘polygon 요소를 나타냅니다.
[Exposed=Window]
interface SVGPolygonElement : SVGGeometryElement {
};
SVGPolygonElement includes SVGAnimatedPoints ;
