대화형 작업

SVG 콘텐츠는 대화형, 즉 사용자 입력에 따라 변경될 수 있습니다.Windows Internet Explorer 9은 SVG 1.1(버전 2) 사양의 대화형 작업(영문) 모듈에 지정된 대로 다음을 비롯한 SVG 대화형 작업 기능을 새롭게 지원했습니다.

마우스 이벤트

  • mousedown
  • mouseup
  • 클릭
  • mouseover
  • mousemove
  • mouseout

커서/포인터 이벤트

  • focusin
  • focusout
  • 정품 인증

또한 Internet Explorer 9은 SVGCursorElement DOM 인터페이스를 새롭게 지원했습니다.

이외에도, Internet Explorer 9 이상 버전에서는 SVG Tiny 1.2 사양(영문)의 대화형 작업 모듈에 지정된 대로 focusable 특성을 지원합니다.

다음 태그는 SVG 대화형 작업의 매우 간단한 예제를 실제로 보여 줍니다.


<svg xmlns=http://www.w3.org/2000/svg
    xmlns:xlink="http://www.w3.org/1999/xlink" width="600"
    height="600">
  <script type="text/ecmascript">
    <![CDATA[

           // object representing circle
           var redcircle;

           // variable representing circle's radius
           var r;
    
           window.onload = function() {
                redcircle = document.getElementById('redcircle');
            r = parseInt(redcircle.getAttribute("r"));
           }
    
           var grow = function() {
            r = 2*r;
                redcircle.setAttribute("r",r);
           }

           var shrink = function() {
            r = r/2;
                redcircle.setAttribute("r",r);
           }]]>
  </script>
  <circle id="redcircle" cx="100" cy="100" r="50" fill="red"
        onmousedown="grow()" onmouseup="shrink()"/>
 </svg>

이 코드 조각을 로드하면 작은 빨간색 원이 표시됩니다.

작은 빨간색 원

원을 클릭하면 두 배 크기로 확대됩니다.

큰 빨간색 SVG 원

mouseovermouseout 이벤트를 사용하여 동일한 효과를 얻을 수 있습니다. 이 경우 커서를 위로 이동하거나 멀리 이동하기만 하면 원이 커지거나 작아집니다.


...
  <circle id="redcircle" cx="100" cy="100" r="50" fill="red"
    onmouseover="grow()" onmouseout="shrink()"/>
 ...

샘플 및 자습서

기본 SVG 애니메이션
중급 SVG 애니메이션
고급 SVG 애니메이션
SVG를 사용하여 확대/축소 및 이동하는 방법

관련 항목

SVG

 

 

표시:
© 2015 Microsoft