15장: 스크립팅 및 상호작용

15.1. 소개

SVG 콘텐츠는 SVG 언어의 다음 기능을 활용하여 상호작용적(즉, 사용자 주도 이벤트에 반응하는)으로 만들 수 있습니다:

• 포인팅 장치(예: 마우스)의 버튼 누름과 같은 사용자 주도 동작은 애니메이션이나 스크립트를 실행시킬 수 있습니다.
• 사용자는 SVG 콘텐츠에서 링크: ‘a’ 요소와 같이 특정 그래픽 요소 위에 포인팅 장치를 두고 마우스 클릭 등으로 새로운 웹 페이지로 하이퍼링크를 시작할 수 있습니다.
• 많은 경우, ‘zoomAndPan’ 속성의 값과 ‘svg’ 요소 및 사용자 에이전트의 특성에 따라, 사용자는 SVG 콘텐츠를 확대하거나 이동할 수 있습니다.

이 장에서는 다음 내용을 설명합니다:

• 이벤트와 이벤트가 발생하는 상황 등 정보
• 문서가 확대 및 이동이 가능한지 표시하는 방법

관련 정보는 다른 장에서도 찾을 수 있습니다:

• 하이퍼링크는 링크에서 다룹니다
• 애니메이션은 SVG 문서 애니메이션에서 다룹니다

15.2. 지원되는 이벤트

다음 SVG의 측면은 이벤트의 영향을 받습니다:

• SVG 문서 객체 모델(DOM)을 사용하여, 스크립트는 DOM 이벤트 리스너 추가 또는 제거([DOM])를 할 수 있으며, 이벤트 타겟에서 특정 이벤트가 발생할 때 스크립트를 호출하거나 무시할 수 있습니다.
• SVG의 애니메이션 요소는 이벤트에 따라 시작 또는 종료되도록 정의할 수 있습니다.

SVG 1.1에서 정의된 SVGLoad, SVGError 등 여러 이벤트는 UI EVENTS와 HTML에서 정의된 동일한 이름의 이벤트로 대체되었습니다.

SVG에서 이벤트를 사용하는 더 현대적인 예시(예: 터치 이벤트, 터치 이벤트 명세 참조)가 필요합니다. 디바이스 방향 이벤트도 참고할 만합니다.

다음 표는 이 명세에서 정의하거나, 기존 명세보다 추가 요구사항 또는 명확한 설명이 있는 이벤트를 나열합니다.

첫 번째 열의 이벤트 이름은 SVG의 애니메이션 요소에서 애니메이션 시작/종료 이벤트 정의에 사용합니다. 두 번째 열의 UI 이벤트 이름은 DOM 이벤트 리스너 ([DOM], 3.6절) 정의에 사용합니다.

표에 없는 HTML 또는 UI 이벤트 등은 해당 이벤트 타입 이름을 SVG의 애니메이션 요소에서 사용합니다.

표에서 특정 이벤트 타입의 이벤트가 버블링되거나 취소 가능한지에 대한 요구사항은 사용자 에이전트가 생성/디스패치 하는 이벤트에만 적용됩니다. Document 인터페이스의 createEvent 메서드를 사용해 스크립트에서 생성된 해당 타입의 이벤트는 initEvent 메서드로 버블링 및 취소 가능 여부를 지정할 수 있습니다.

UI 이벤트용 이벤트 리스너에 전달되는 파라미터의 자세한 내용은 ([uievents]) 및 ([DOM]) 명세에서 확인할 수 있습니다. 다른 이벤트 타입의 경우, 이벤트 리스너에 전달되는 파라미터는 본 명세의 다른 곳에서 설명합니다.

마찬가지로 event-value 타이밍 지정자는 애니메이션 요소의 ‘begin’ 및 ‘end’ 속성에서 사용되며, 해당 요소에 디스패치된 "버블링" 및 "타겟에서" 단계의 이벤트에만 구체적인 시간으로 해석됩니다.

15.2.1. UI 이벤트와의 관계

SVG DOM은 UI Events에서 정의된 모든 인터페이스와 이벤트 타입, 그리고 클립보드 API 및 이벤트에서 정의된 이벤트 타입을 모두 지원합니다 ([uievents], [clipboard-apis]).

SVG 네임스페이스 내 모든 요소는 이러한 이벤트에 대한 이벤트 속성을 지원합니다. 매칭되는 IDL 프로퍼티는 기본 SVGElement 인터페이스에 GlobalEventHandlers와 DocumentAndElementEventHandlers 믹스인으로 각각 포함됩니다.

SVG DOM 지원의 일부로, 적합한 SVG 소프트웨어는 관련 이벤트가 소프트웨어에서 발생할 수 있는 경우 해당 명세에서 정의된 모든(사용 중단되지 않고, 폐기되지 않은) 이벤트 타입을 지원해야 합니다. 사용자 상호작용을 지원하지 않는 SVG 소프트웨어도 상호작용 없이 발생 가능한 load 및 error 이벤트와 같은 이벤트는 반드시 지원해야 합니다.

SVG 애니메이션 요소 (SVG Animations Level 2 명세에서 정의됨)는 추가적인 이벤트와 이벤트 속성을 지원합니다. 다음 이벤트 타입들은 애니메이션의 상태 변화에 따라 트리거됩니다.

• beginEvent
• endEvent
• repeatEvent

이러한 애니메이션 이벤트에 대한 이벤트 속성은 다른 요소에는 영향을 주지 않습니다.

15.3. 사용자 인터페이스 이벤트

상호작용을 지원하는 사용자 에이전트에서는 작성자가 SVG 문서를 사용자 인터페이스 이벤트에 반응하도록 정의하는 것이 일반적입니다. 가능한 사용자 이벤트 집합에는 포인터 이벤트, 키보드 이벤트, 문서 이벤트 등이 있습니다.

사용자 인터페이스(UI) 이벤트에 반응하여, 작성자는 애니메이션을 시작하거나, 다른 웹 페이지로 하이퍼링크를 수행하거나, 문서의 일부(예: 포인터 아래에 있는 그래픽 요소의 색상 변경)를 강조하거나, "롤오버"(예: 이전에 숨겨져 있던 그래픽 요소를 포인터 근처에 나타나게 함)를 시작하거나, 원격 데이터베이스와 통신하는 스크립트를 실행할 수 있습니다.

15.4. 포인터 이벤트

사용자 동작에 의해 포인터 장치에서 발생하는 사용자 인터페이스 이벤트를 포인터 이벤트라고 합니다.

많은 시스템이 마우스나 트랙볼과 같은 포인터 장치를 지원합니다. 마우스를 사용하는 시스템에서는 포인터 이벤트가 마우스 이동, 클릭 등의 동작으로 구성됩니다. 다른 포인터 장치가 있는 시스템에서는 포인팅 장치가 일반적으로 마우스 클릭과 같은 동작을 제공하는 방식으로 마우스의 동작을 에뮬레이트합니다.

각 포인터 이벤트마다 SVG 사용자 에이전트는 해당 포인터 이벤트의 타겟 요소를 결정합니다. 타겟 요소는 이벤트 시점에 포인터 아래에 있는 최상위 그래픽 요소입니다. (요소의 관련 그래픽 콘텐츠가 포인터 아래에 있는지, 그리고 어떤 상황에서 해당 그래픽 요소가 포인터 이벤트의 타겟이 되는지에 대한 설명은 pointer-events 속성을 참조하세요.) 요소가 표시되지 않는 경우(즉, 해당 요소 또는 상위 요소의 display 속성이 none인 경우), 해당 요소는 포인터 이벤트의 타겟이 될 수 없습니다.

포인터 이벤트의 타겟 요소가 존재하면, 해당 이벤트는 일반적인 이벤트 흐름에 따라 그 요소로 디스패치됩니다 ([uievents], 3.1절). ‘use’ 요소나 스크립트로 생성된 쉐도우 트리에서는 이벤트 디스패치 [dom] 규칙을 따라야 합니다.

포인터 이벤트의 타겟 요소가 없다면, 이벤트는 무시됩니다.

15.5. 사용자 인터페이스 이벤트의 히트 테스트 및 처리 순서

히트 테스트(hit-testing)

포인터가 특정 그래픽 요소와 교차하는지 판단하는 과정입니다. 히트 테스트는 마우스 이벤트를 어떤 요소에 디스패치할지 결정할 때 사용되며, 이는 사용자가 포인팅 장치를 움직이거나, 문서 내 요소들의 위치/모양/속성이 변경될 때 발생할 수 있습니다. 히트 테스트는 히트 감지(hit detection) 또는 픽킹(picking)이라고도 합니다. pointer-events 속성의 정의도 참고하세요.

포인터 장치와 요소 또는 영역간의 상호작용에는 두 가지 측면이 있습니다:

1. 히트 테스트: 포인터 이벤트(예: 마우스 이동이나 클릭)가 요소의 상호작용 영역 내에서 발생했는지, 그리고 이후 DOM 이벤트 흐름;
2. 관련 요소와 연관된 동작의 기능적 처리.

15.5.1. 히트 테스트

포인터 이벤트가 히트 테스트에서 긍정 결과를 얻는지 여부는 포인터 위치, 그래픽 요소의 크기와 모양, 그리고 요소의 pointer-events 속성의 계산된 값에 따라 결정됩니다. 아래의 pointer-events 속성 정의에서 해당 그래픽 요소 타입별로 포인터 이벤트에 민감한 정확한 영역을 설명합니다.

‘svg’ 요소는 그래픽 요소가 아니며, 적합한 SVG 독립 파일에서 최상위 svg 요소는 포인터 이벤트의 타겟이 될 수 없습니다. 하지만 이벤트가 이 요소까지 버블링될 수는 있습니다. 포인터 이벤트가 히트 테스트에서 긍정 결과를 얻지 못하면, 사용자 에이전트 특화 윈도우 동작(예: 컨텍스트 메뉴 표시, SVG 문서 조각 확대/이동 컨트롤 등)이 실행될 수 있습니다.

이 명세는 다른 문서에 참조 또는 포함된 SVG 이미지의 최상위 svg 요소에 대한 포인터 이벤트 동작을 정의하지 않습니다. 예를 들어, HTML 문서에 포함된 최상위 svg 요소가 마우스 클릭 이벤트를 가로채는지 등은 향후 명세에서 정의될 수 있지만, 현행 표준에서는 구현에 따라 달라집니다.

15.5.2. 이벤트 처리

사용자 인터페이스 이벤트의 타겟이 된 요소는, 요소의 타입이나 명시적으로 연관된 상호작용(스크립트 이벤트 리스너, CSS 의사 클래스 매칭, 이벤트 기반 타이밍의 선언적 애니메이션 등)에 따라 특정 상호작용 동작을 가질 수 있습니다. 타겟 요소에 대한 사용자 인터페이스 이벤트 처리 알고리즘 및 순서는, DOM 이벤트 디스패치 이후 다음과 같습니다:

1. 이 요소에 등록된 이벤트 핸들러가 preventDefault() DOM 메서드를 호출하면, 해당 요소에 대한 추가 처리 없이 이벤트는 이벤트 디스패치 및 DOM 이벤트 흐름 처리를 따릅니다 ([uievents]);
2. 요소에 ‘title’ 요소와 같이 연관된 제목 또는 설명이 있고, 사용자 에이전트가 해당 정보 표시(예: 툴팁, 상태바 메시지)를 지원한다면, 포인터 이벤트 종류에 맞게 해당 정보를 표시해야 합니다;
3. 요소가 동적 의사 클래스 선택자에 적합하다면(예: :hover, :active, :focus 등 [CSS2] 5.11절 참조), 해당 클래스의 속성이 적용됩니다;
4. 요소 및 이벤트 타입이 event-value 타이밍 지정자를 사용한 선언적 애니메이션 활성화/취소와 연관되어 있다면, 해당 인스턴스 타임을 해석하고, 인스턴스 타임 해석의 결과(예: 즉시 애니메이션 시작/중지)를 반드시 수행해야 합니다;
5. 요소가 하이퍼링크(예: ‘a’ 요소의 하위 요소)이고, 포인터 이벤트가 하이퍼링크 활성화 타입(예: 마우스 클릭)이며, 하이퍼링크 이동이 콘텐츠의 컨텍스트를 변경한다면(예: 다른 문서 열기, 같은 문서 내 다른 위치로 포인터 이동 등), 해당 요소에 대한 추가 처리는 수행하지 않습니다;
6. 요소가 텍스트 콘텐츠 요소이고, 이벤트 타입이 사용자 에이전트가 텍스트 선택 동작으로 인식하는 경우(예: 마우스 드래그, 더블 클릭 등)라면, 텍스트 선택 알고리즘을 실행합니다;
7. 이벤트 타입이 사용자 에이전트가 특수 사용자 인터페이스 컨트롤을 유발하는 것으로 연결하는 경우(예: 오른쪽 클릭, 명령 클릭 등으로 컨텍스트 메뉴 호출), 사용자 에이전트는 해당 컨텍스트 메뉴 표시, SVG 문서 조각 확대/이동 컨트롤 등 사용자 에이전트 특화 동작을 실행해야 합니다.

15.6. ‘pointer-events’ 속성

다양한 상황에서 작성자는 특정 그래픽 요소가 포인터 이벤트의 타겟이 되는 조건을 제어하고 싶을 수 있습니다. 예를 들어, 작성자는 특정 요소가 도형의 외곽선(스트로크) 위에 포인터가 있을 때만 포인터 이벤트를 받도록 하거나, 어떤 요소는 모든 상황에서 포인터 이벤트를 무시하여 그 아래의 그래픽 요소가 포인터 이벤트의 타겟이 되도록 할 수 있습니다.

마스킹과 클리핑은 pointer-events와 관련하여 효과가 다릅니다. 클리핑 경로는 기하학적 경계로, 특정 지점이 경계 안에 있거나 밖에 있는 것이 명확하게 구분됩니다. 따라서 클리핑된 요소의 렌더링된 영역에서는 포인터 이벤트를 정상적으로 감지해야 하며, 클리핑 영역에서는 감지하지 않아야 합니다. (클리핑 경로 정의 참고) 반면 마스크는 이진 전환이 아니라 픽셀 단위 연산이며, 완전 투명과 거의 투명 사이의 동작이 임의적일 수 있습니다. 그래서 마스크가 적용된 요소에서는 마스크의 불투명도가 0인 영역에서도 포인터 이벤트를 반드시 감지해야 합니다. 마스크의 투명 부분에서 아래 요소로 포인터 이벤트를 넘기고 싶다면 마스킹과 클리핑을 조합해서 사용해야 합니다.

filter 속성은 포인터 이벤트 처리에 아무런 영향을 미치지 않으며, 이 맥락에서는 filter가 지정되지 않은 것처럼 취급해야 합니다.

예를 들어, stroke가 red인(즉, 외곽선이 빨간색) 원과 fill이 none인(즉, 내부가 채워지지 않음) 원이 fill이 blue인 사각형 위에 바로 렌더링되어 있다고 가정합니다. 작성자는 원의 외곽선 위에 포인터가 있을 때만 원이 포인터 이벤트의 타겟이 되기를 원할 수 있습니다. 원의 내부에 포인터가 있을 때는 아래 사각형이 포인터 이벤트의 타겟이 되길 원할 수 있습니다.

pointer-events 속성은 특정 요소가 어떤 상황에서 포인터 이벤트의 타겟이 될 수 있는지 지정합니다. 이는 다음 처리에 영향을 줍니다:

• 마우스 클릭 등 사용자 인터페이스 이벤트
• 동적 의사 클래스 (:hover, :active, :focus; [CSS2], 5.11절)
• 하이퍼링크 (SVG 콘텐츠에서 링크: ‘a’ 요소 참고)

bounding-box

포인터가 요소의 bounding box 위에 있을 때 해당 요소가 포인터 이벤트의 타겟이 되어야 합니다.

visiblePainted

visibility 속성이 visible이고, 포인터가 "페인팅된" 영역 위에 있을 때 해당 요소가 포인터 이벤트의 타겟이 될 수 있습니다. 페인팅된 영역이란 내부(즉, fill) 위이고 fill 속성이 none이 아니거나, 외곽선(즉, stroke) 위이고 stroke 속성이 none이 아닐 때를 의미합니다.

visibleFill

visibility 속성이 visible이고, 포인터가 요소의 내부(즉, fill) 위에 있을 때 해당 요소가 포인터 이벤트의 타겟이 될 수 있습니다. fill 속성 값은 이벤트 처리에 영향을 주지 않습니다.

visibleStroke

visibility 속성이 visible이고, 포인터가 요소의 외곽선(즉, stroke) 위에 있을 때 해당 요소가 포인터 이벤트의 타겟이 될 수 있습니다. stroke 속성 값은 이벤트 처리에 영향을 주지 않습니다.

visible

visibility 속성이 visible이고, 포인터가 내부(즉, fill)나 외곽선(즉, stroke) 위에 있을 때 해당 요소가 포인터 이벤트의 타겟이 될 수 있습니다. fill과 stroke 값은 이벤트 처리에 영향을 주지 않습니다.

painted

포인터가 "페인팅된" 영역 위에 있을 때 해당 요소가 포인터 이벤트의 타겟이 될 수 있습니다. 페인팅된 영역이란 내부(즉, fill) 위이고 fill 속성이 none이 아니거나, 외곽선(즉, stroke) 위이고 stroke 속성이 none이 아닐 때입니다. visibility 속성 값은 이벤트 처리에 영향을 주지 않습니다.

fill

포인터가 요소의 내부(즉, fill) 위에 있을 때 해당 요소가 포인터 이벤트의 타겟이 될 수 있습니다. fill과 visibility 값은 이벤트 처리에 영향을 주지 않습니다.

stroke

포인터가 요소의 외곽선(즉, stroke) 위에 있을 때 해당 요소가 포인터 이벤트의 타겟이 될 수 있습니다. stroke와 visibility 값은 이벤트 처리에 영향을 주지 않습니다.

all

포인터가 내부(즉, fill) 또는 외곽선(즉, stroke) 위에 있을 때마다 해당 요소가 포인터 이벤트의 타겟이 될 수 있습니다. fill, stroke, visibility 값은 이벤트 처리에 영향을 주지 않습니다.

none

해당 요소는 포인터 이벤트를 받지 않습니다.

텍스트 요소의 경우, 히트 테스트는 문자 셀 기준으로 수행됩니다:

• visiblePainted 값은 fill 속성이 none이 아니거나 stroke 속성이 none이 아닌 경우, 그리고 visibility 속성이 visible일 때 문자 셀 내 어디서든 이벤트를 받을 수 있음을 의미합니다.
• visibleFill, visibleStroke, visible 값은 동일하며, visibility 속성이 visible일 때 문자 셀 내 어디서든 이벤트를 받을 수 있습니다. fill 및 stroke 값은 이벤트 처리에 영향을 주지 않습니다.
• painted 값은 fill 속성이 none이 아니거나 stroke 속성이 none이 아닌 경우, 문자 셀 내 어디서든 이벤트를 받을 수 있음을 의미합니다. visibility 값은 이벤트 처리에 영향을 주지 않습니다.
• fill, stroke, all 값은 동일하며, 문자 셀 내 어디서든 이벤트를 받을 수 있음을 의미합니다. fill, stroke, visibility 값은 이벤트 처리에 영향을 주지 않습니다.
• none 값은 해당 텍스트가 포인터 이벤트를 받지 않음을 의미합니다.

래스터 이미지(raster images)의 경우, 히트 테스트는 전체 이미지 기준(즉, 이미지의 사각형 영역이 이벤트를 받을지 결정) 또는 픽셀별 기준(즉, 포인터 아래 픽셀의 알파 값이 이벤트 수신 여부 결정)으로 수행됩니다:

• visiblePainted 값은 포인터 아래 있는 래스터 이미지의 픽셀 중 완전히 투명하지 않은 픽셀이 하나라도 있으면, 그리고 visibility 속성이 visible이면, 이미지 영역 내 어디서든 이벤트를 받을 수 있음을 의미합니다.
• visibleFill, visibleStroke, visible 값은 동일하며, visibility 속성이 visible일 때 이미지의 사각형 영역 내 어디서든 이벤트를 받을 수 있습니다.
• painted 값은 포인터 아래 있는 래스터 이미지의 픽셀 중 완전히 투명하지 않은 픽셀이 하나라도 있으면 이미지 영역 내 어디서든 이벤트를 받을 수 있음을 의미합니다. visibility 값은 이벤트 처리에 영향을 주지 않습니다.
• fill, stroke, all 값은 동일하며, 이미지의 사각형 영역 내 어디서든 이벤트를 받을 수 있음을 의미합니다. visibility 값은 이벤트 처리에 영향을 주지 않습니다.
• none 값은 이미지가 포인터 이벤트를 받지 않음을 의미합니다.

래스터 이미지의 경우, opacity, fill-opacity, stroke-opacity, fill, stroke 값은 이벤트 처리에 영향을 주지 않습니다.

15.7. 확대 및 이동

확대(확대/축소)는 SVG 문서 조각에 대해 전체적으로 균일하게 적용되는 변환을 나타내며, 확대 작업은 모든 그래픽 요소를 동일한 비율로 스케일링합니다. 확대 작업은 SVG 문서 조각의 최상위 수준(즉, 최상위 svg 요소 외부)에 보조적인 스케일 및 변환이 추가된 것과 같은 효과를 가집니다.

이동(pan)은 사용자 인터페이스 동작에 따라 SVG 문서 조각에 적용되는 변환(즉, 평행 이동)을 나타냅니다.

상호작용이 가능한 사용자 환경에서 동작하는 SVG 사용자 에이전트는 확대 및 이동 기능을 반드시 지원해야 합니다.

SVG 문서 조각의 최상위 svg 요소에는 ‘zoomAndPan’ 속성이 있으며, 이 속성은 disable과 magnify 값을 가질 수 있고, 기본값은 magnify입니다.

zoomAndPan 속성은 위험에 처해 있으며, 알려진 구현이 없고 구현될 가능성이 낮습니다. Github issue #56 참고.

이름	값	초기값	애니메이션 가능
zoomAndPan	[ disable | magnify ]	disable	아니오

disable이면, 사용자 에이전트는 모든 확대 및 이동 컨트롤을 비활성화하고, 해당 문서 조각에서 사용자가 확대 또는 이동을 할 수 없도록 해야 합니다.

magnify이면, 상호작용을 지원하는 환경에서 사용자 에이전트는 사용자가 문서 조각에 대해 "확대" 작업을 수행할 수 있도록 컨트롤을 제공해야 합니다.

‘zoomAndPan’ 속성이 내부 ‘svg’ 요소에 지정된 경우, 내부 ‘svg’ 요소의 ‘zoomAndPan’ 설정은 SVG 사용자 에이전트에 아무런 영향을 주지 않습니다.

<!DOCTYPE html>
<button id="A" tabindex="1">First thing</button>
<button id="C" tabindex="2">Third thing</button>
<svg width="200" height="200">
  <text id="B" tabindex="1" x="100" y="100">Second thing</text>
</svg>

15.9. 이벤트 속성

이벤트 속성

이벤트 속성은 항상 "on"으로 시작하며, 뒤에 해당 이벤트 이름이 붙습니다. 이는 해당 이벤트 타입이 해당 속성이 지정된 요소에 디스패치될 때 실행할 스크립트를 지정합니다.

사용자 에이전트가 지원하는 모든 이벤트 타입에 대해, SVG는 HTML의 이벤트 핸들러 콘텐츠 속성과 동일한 요구사항을 따라 이벤트 속성을 지원합니다 [HTML]。 이벤트 속성은 모든 SVG 요소에서 사용할 수 있습니다.

이벤트 속성의 내용은 항상 ECMAScript로 해석되며, 'application/ecmascript' 미디어 타입으로 처리된 것과 동일하게 해석됩니다。 [rfc2046][rfc4329]

이벤트 속성은 애니메이션 가능하지 않습니다。

구현자는 이벤트 속성 설정을 EventListener를 EventTarget에 생성·등록하는 것으로 간주할 수 있습니다. 이러한 이벤트 리스너는 "버블링" 및 "타겟에서" 단계에서만 호출되며, addEventListener의 useCapture 인자에 false를 지정한 것과 같습니다。 이 EventListener는 EventTarget에 등록될 수 있는 다른 리스너와 동일하게 동작합니다.

이벤트 리스너를 나타내는 속성이 변경되면, 이는 이전에 등록된 EventListener를 제거하고 새로운 리스너를 등록하는 것으로 볼 수 있습니다。또한, 이벤트 속성이 다른 EventListener와 비교해 어떤 순서로 이벤트를 받을지는 명세되지 않습니다。

function myAction1(evt) {
  // 이벤트 처리
}
// ... 이후 ...
myElement.addEventListener("click", myAction1, false)

<rect onclick="MyClickHandler(evt)" .../>

15.9.1. 애니메이션 이벤트 속성

아래는 애니메이션 이벤트 속성의 정의입니다。 이 속성들은 애니메이션 요소에 지정할 수 있습니다。

속성 정의:

이름	값	초기값	애니메이션 가능
onbegin, onend, onrepeat	(아래 참조)	(없음)	아니오

해당 이벤트에 대한 "버블링" 또는 "타겟에서" 단계 리스너가 요소에서 실행될 때 스크립트를 실행합니다。 각 이벤트 속성이 어떤 이벤트에 대응하는지는 지원 이벤트 표를 참고하세요。 이 속성의 값에는 제한이 없습니다。

15.10. ‘script’ 요소

‘script’ 요소는 HTML의 ‘script’ 요소와 동일하며, 따라서 스크립트(예: ECMAScript)를 위한 공간입니다。모든 ‘script’ 요소 내에서 정의된 함수는 현재 문서 전체에서 "전역" 스코프를 갖습니다。

스크립트의 텍스트 콘텐츠는 직접적으로 렌더링되지 않습니다; ‘script’ 요소의 display 값은 반드시 none으로 사용자 에이전트 스타일 시트에서 지정되어야 하며, 이 선언은 다른 CSS 규칙이나 표시 속성보다 우선해야 합니다。

‘script’ 요소를 실행하기 전에 ‘type’의 해석된 미디어 타입 값을 검사해야 합니다。 SVG 사용자 에이전트가 해당 스크립트 언어를 지원하지 않으면, ‘script’ 요소는 실행되지 않아야 합니다。

이 예제는 ‘onclick’ 이벤트 속성이 ‘circle’ 요소에서 호출하는 circle_click 함수를 정의합니다。아래 왼쪽 그림은 초기 이미지이고, 오른쪽 그림은 원을 클릭한 후의 결과입니다。

  <?xml version="1.0" standalone="no"?>
  <svg width="6cm" height="5cm" viewBox="0 0 600 500"
       xmlns="http://www.w3.org/2000/svg">
    <desc>예제 script01 - onclick 이벤트에서 ECMAScript 함수 호출
    </desc>
    <!-- 클릭할 때마다 반지름을 변경하는 ECMAScript -->
    <script type="application/ecmascript"> <![CDATA[
      function circle_click(evt) {
        var circle = evt.target;
        var currentRadius = circle.getAttribute("r");
        if (currentRadius == 100)
          circle.setAttribute("r", currentRadius*2);
        else
          circle.setAttribute("r", currentRadius*0.5);
      }
    ]]> </script>

    <!-- 파란색 선으로 그리기 영역을 표시 -->
    <rect x="1" y="1" width="598" height="498" fill="none" stroke="blue"/>

    <!-- 클릭 이벤트 처리 -->
    <circle onclick="circle_click(evt)" cx="300" cy="225" r="100"
            fill="red"/>

    <text x="300" y="480"
          font-family="Verdana" font-size="35" text-anchor="middle">

      원을 클릭하여 크기를 변경
    </text>
  </svg>
  

‘onclick’ 이벤트 핸들러가 SVG 도형에 미치는 효과 예시。

이 예제를 SVG로 보기 (SVG 지원 브라우저에서만)

속성 정의:

이름	값	초기값	애니메이션 가능
crossorigin	[ anonymous | use-credentials ]?	(HTML 속성 정의 참조)	예

crossorigin 속성은 CORS 설정 속성이며, 별도의 명시가 없는 한 html과 동일한 처리 규칙을 따릅니다 [HTML]。

이름	값	초기값	애니메이션 가능
type	(아래 참조)	application/ecmascript	아니오

해당 ‘script’ 요소의 스크립트 언어를 식별합니다。값은 Multipurpose Internet Mail Extensions (MIME) Part Two [rfc2046]에 따라 유효한 미디어 타입이어야 합니다。 ‘type’이 제공되지 않으면, 기본 스크립트 언어는 ECMAScript로 간주되며 ‘application/ecmascript’ 미디어 타입으로 처리된 것과 같습니다。

이름	값	초기값	애니메이션 가능
href	URL [URL]	(없음)	아니오

외부 리소스에 있는 스크립트 코드에 대한 URL 참조입니다。 URL 참조 속성과 사용 중단된 XLink 속성에 대한 공통 처리 참조。

URL은 링크 장에서 설명한 대로 처리 및 리소스가 가져와집니다。

15.11. DOM 인터페이스

15.11.1. SVGScriptElement 인터페이스

SVGScriptElement 객체는 DOM에서 ‘script’ 요소를 나타냅니다。

[Exposed=Window]
interface SVGScriptElement : SVGElement {
  attribute DOMString type;
  attribute DOMString? crossOrigin;
};

SVGScriptElement includes SVGURIReference;

type IDL 속성은 ‘type’ 콘텐츠 속성을 반영합니다.

crossOrigin IDL 속성은 ‘crossorigin’ 콘텐츠 속성을 반영합니다.