이 페이지는 다음 사이트를 참고하였습니다.
developer.mozilla.org/.../SVG/Element/animate#animation_attributes

애니메이션 요소

종류

애니메이션 테그
테그명 세부속성 효과 값
공통 keyTimes 각 입력값의 타이밍 0 ~ 1, 키 갯수 만큼
calcMode 부드러운 움직임 linear, ease, discrete
begin 시작조건 s, ms
이벤트명(이벤종류 상세)
end 종료조건 s, ms
이벤트명(이벤종류 상세)
value 변경하고자하는 값Array, 구분자:세미콜론(;)) 속성에 부합하는 값
dur 변경 시간 s, ms
repeatCount 변경 시간 자연수, indefinite
max 지속기간 s, ms
restart 재시작 조건 always, never, whenNotActive(애니메이션 중엔 재시작X)
additive sum
animate attributeName 변경할 속성 fill, opacity, fill-rule
stroke-opacity, stroke-width, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-dasharray, stroke-dashoffset
display, visibility, shape-rendering, color-interpolation, pathLength
x, y, width, height, rx, ry, cx, cy, r...
animateMotion path 경로 d="작성"
animateTransform type 변경 함수 translate, rotate, scale, skewX, skewY
E_Animation >> animations.svg animateMotion scale rotate translate skewX fill stroke stroke-dashoffset opacity

이벤트

이벤트의 종류
입력 동작
마우스 click, dblclick, aucclick(?), mousedown, mouseup, mouseleave, mousemove, mouseout, mouseover, wheel
pointerdown, pointerup, pointermove, pointerenter, pointerleave, pointover, pointerout, pointercancel
스크린터치 touchstart, touchmove, touchend, touchcancel(?)
선택/해제 focus, focusin, focusout, blur
윈도우 이벤트 contextmenu, select(?), load(?)
E_Animation >> events.svg 클릭(1번) 마우스오버 스크린 터치 스크린 드레그 해제시 좌클릭(메뉴) 클릭후 2초후 1번 클릭후, 1초후

고려할 요소

CSS연계

'예제1'과 '예제2'는 같은 내용입니다. 단지 css에서 제공하는 애니메이션 문법을 쓸 것인가(좌), svg에서 제공하는 애니메이션을 쓸 것인가(중)만 다릅니다. (우): offset테스트

offset테스트(우)
  • 원은 지름이 100인 원입니다(a 50,50). 따라서 둘레가 314가 됩니다.
  • stroke-dasharray는 점선 문법입니다. stroke-dasharray:314이므로 314px 칠하고, 314px지우고를 반복합니다.
  • stroke-dashoffset은 얼마나 뒤(진행반대방향)으로 밀 것인가를 나타냅니다. offset:314가 되면 완전히 밀려서 뗀선314, 즉 안보이는 상태가 됩니다.
  • duration:2s(2초)라면 50%(1초)동안 지우고, 50%(1초)동안 칠합니다.
    •

    예제1

    E_Animation >> withCSS.html 
          <svg viewbox="0 0 103 103" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path class="circle" d="M 52 1 a50,50 0 1 1 -1 0z" fill="none" stroke="red" />
</svg>
<style>
  .circle {
    stroke-dasharray: 314;
    animation: ani 2s linear infinite;
  }

  @keyframes ani {
    0% {
      stroke-dashoffset: -314;
    }
    50% {
      stroke-dashoffset: 0;
    }
    100% {
      stroke-dashoffset: 314;
    }
  }
</style>

    예제2

          <svg viewbox="0 0 103 103" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M 52 1 a50,50 0 1 1 -1 0z" fill="none" stroke="red" stroke-dasharray="314" stroke-dashoffset="0">
    <animate attributeName="stroke-dashoffset" values="314;0;-314" dur="3s" repeatCount="indefinite" />
  </path>
</svg>

    회전 중심점

    아래 예제는 "from="0 60 70" to="360 60 70""에 의하여 화전 중심점을 지정하였습니다. 

    <svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"
  <polygon points="60,30 90,90 30,90">
    <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 60 70" to="360 60 70"
      dur="10s" repeatCount="indefinite" />
  </polygon>
</svg>
    출처:mozilla

    또는 아래와 같이 "transform-origin:"로 회전 중심점을 지정 할 수 있습니다. 

    <path d="M 100 105 L 139 132 L 124 176 L 76 176 L 61 132 Z" style="transform-origin: 100px 145px;">
  <animateTransform type="rotate" attributeName="transform" values="0;360" dur="2s" repeatCount="1" begin="mouseenter"/>
</path>

    애니메이션 진행방향

    <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <path id="infinite-path" fill="none" stroke="lightgrey"
    d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
  <ellipse rx="5" ry="7" fill="red">
    <animateMotion dur="10s" repeatCount="indefinite" path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z"
      rotate="auto" />
  </ellipse>
</svg>

    path 애니메이션

     마우스를 올려서 테스트 해 보세요.  주의 할 점은, path의 구성이 동일해야한다는 것입니다. 예제에서 Move, line, arc의 순서로 배치(M110,100 v-73.3 a0 0 0 0 0 0 0)되었는데, path의 순서/구성을 위배하면 동작은 되지만 애니메이션은 되지 않습니다. 
    <style>
  #what-is-radian:hover path#arc {
    transition: 1s d ease-in-out;
    d: path("M110,100 v-73.3 a0 0 0 0 0 0 0");
  }

  #what-is-radian:hover path#tri {
    transition: 1s d ease-in-out;
    d: path("M10 100 h100 v-73.3 a0 0 0 0 0 0 0 z");
  }
</style>

<svg id="what-is-radian" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 110">
  <path d="M10 100 h100 v-90 z" stroke-dasharray="5" style="stroke:black;fill:none;" />
  <path d="M10 100 h100 v0 a100 100 0 0 0 -25.7 -66.9 z" style="stroke:black;fill:#ddd;" />
  <path id="tri" d="M10 100 h100 v0 a100 100 0 0 0 -25.7 -66.9 z" style="stroke:black;fill:#ddd8;" />
  <path id="arc" d="M110 100 v0 a100 100 0 0 0 -25.7 -66.9" style="stroke:red;fill:none;stroke-width:3px" />
</svg>