HTML5 11의 SVG 2D 소개 - 사용자 상호 작용(애니메이션) 소개 및 application_html5 튜토리얼 기술

상호작용성
SVG는 다음과 같은 우수한 사용자 상호작용성을 가지고 있습니다.
1. SVG는 대부분의 DOM2 이벤트에 응답할 수 있습니다.
2. SVG는 커서를 통한 사용자의 마우스 움직임을 잘 포착할 수 있습니다.
3. 사용자는 svg 요소의 ZoomAndPan 속성 값을 설정하여 쉽게 확대/축소 및 기타 효과를 얻을 수 있습니다.
4. 사용자는 애니메이션과 이벤트를 쉽게 결합하여 복잡한 효과를 완성할 수 있습니다.
SVG 요소에 이벤트를 연결하면 스크립팅 언어를 사용하여 일부 대화형 작업을 쉽게 완료할 수 있습니다. SVG는 onfocusin, onfocusou, onclick, onmousedown, onmouseup, onmousemove, onmouseout, onload, onresize, onscroll 및 기타 이벤트와 같은 대부분의 DOM2 이벤트를 지원합니다. 이 외에도 SVG는 onroom, onbegin, onend, onrepeat 등과 같은 고유한 애니메이션 관련 이벤트도 제공합니다.
이 사건에 대해서는 다들 잘 알고 계시기 때문에 자세한 내용은 언급하지 않겠습니다.

애니메이션 방법
SVG는 텍스트를 사용하여 그래픽을 정의하는 데 매우 적합한 문서 구조입니다. 그래픽의 위치, 크기, 색상을 변경하려면 해당 속성만 조정하면 됩니다. 실제로 SVG에는 다양한 이벤트 처리를 위해 특별히 설계된 속성이 있으며 그 중 많은 속성이 애니메이션용으로 특별히 맞춤화되었습니다. SVG에서는 애니메이션을 구현하는 방법이 여러 가지가 있습니다.
1. SVG 애니메이션 요소를 사용합니다. 이에 대해서는 아래에서 강조하겠습니다.
2. 스크립트를 사용하세요. DOM 작업을 사용하여 애니메이션을 시작하고 제어하는 ​​것은 이미 성숙한 기술입니다. 아래에는 작은 예가 있습니다.
3. SMIL(동기화된 멀티미디어 통합 언어). 관심이 있으시면 http://www.w3.org/TR/2008/REC-SMIL3-20081201/을 참조하세요.
다음 예에는 SVG의 가장 기본적인 여러 애니메이션이 포함되어 있습니다:

코드 복사

코드는 다음과 같습니다.

xmlns="http://www.w3 .org /2000/svg" version="1.1">
기본 애니메이션 요소
fill="none" 스트로크="blue" 스트로크-너비="2" />