애니메이션

SVG 애니메이션은 SMIL 사양을 기반으로 한 애니메이션 효과를 적용할 수 있습니다. CSS3 애니메이션 또는 JS 애니메이션을 사용할 수 있습니다. SVG 애니메이션과 CSS3 애니메이션을 함께 사용하면 원하는 거의 모든 것을 할 수 있습니다. SVG 애니메이션은 좀 더 강력한 기능을 가지고 있습니다. Snap.svg와 같은 자바스크립트 라이브러리를 사용해 복잡한 애니메이션도 비교적 쉽게 만들 수 있습니다. 이 라이브러리는 필자의 자바스크립트 수준의 이상임으로, 아래 예제를 통해 살펴보시길 바랍니다.

SVG 애니메이션 기능은 매우 강력하지만, 실제로 제가 사용한 애니메이션은 일부라 너무 깊이 다루지 않겠습니다. 멋진 애니메이션을 만들고 싶겠지만, 모든 프로젝트에서 사용할 수 있는 시간과 예산은 한정적입니다. 그래서 여러분들이 다루기 쉬운 훌륭한 온라인 튜토리얼이 있는 것입니다.

가장 좋은 점은 모든 구현 방법에서 작동한다는 것입니다. 기본적으로 애니메이션을 제어할 SVG의 모든 경로와 모양에 하위 요소로 <animiate>를 추가 할 수 있습니다. 가장 좋은 점은 모든 애니메이션이 작동한다는 것입니다. Internet Explorer는 SVG 애니메이션을 지원하지 않습니다만, Internet Explorer에서도 작동하게 하려면 FakeSmile 등의 polyfill을 사용할 수 있습니다.

다음 예제가 있습니다. 애니메이션 효과가 좀더 잘 보이도록 파란색을 밝게 했습니다.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 65">
  <path fill="#4e86b1" d="M42 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v21l12 15-7 15.7c14.5 13.9 35 2.8 35-13.7 0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z">
    <animate dur="2s" values="#000000; #4e86b1; #000000" keyTimes="0; 0.5; 1" attributeName="fill" repeatCount="indefinite"/>
  </path>
  <path d="M14 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v41c0 8.2 9.2 17 20 17s20-9.2 20-20c0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z">
    <animate dur="2s" values="#4e86b1; #000000; #4e86b1" keyTimes="0; 0.5; 1" attributeName="fill" repeatCount="indefinite"/>
    </path>
</svg>


SVG 애니메이션

Object

Breaking Borders Logo

Inline

Breaking Borders Logo

Img

Breaking Borders Logo

Background-image

Breaking Borders Logo


웹 상의 아이콘이나 일러스트레이션의 애니메이션은 마우스 호버(hover) 등 인터렉션을 위해 사용됩니다. 앞에서 CSS 조작 및 SVG 애니메이션 지원 비교 표를 보았듯이, <img>와 background-image는 SVG 애니메이션이나 CSS3 애니메이션을 지원하지 않습니다. SVG 애니메이션에서 인터렉티브한 애니메이션 효과를 주려면 begin="mouseover"& begin="mouseout"을 추가하거나, CSS3 애니메이션에 SVG 요소에 클래스를 추가하고 호버에 스타일을 적용할 수 있습니다. 주의 사항은 외부 스타일 시트에 애니메이션 스타일을 지정하려면 SVG 인라인을 사용하는 경우에는 정상적으로 작동하지만, <object>를 사용하는 경우 SVG 내에 외부 스타일 시트를 참조해야 합니다.


인터렉티브 SVG 애니메이션

<object> 또는 인라인에서만 구현됩니다. 


이미지 확인하기 https://goo.gl/Xs26hU



<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 65">
  <path fill="#4e86b1" d="M42 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v21l12 15-7 15.7c14.5 13.9 35 2.8 35-13.7 0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z">
    <animate fill="freeze" dur="0.1s" to="#000000" from="#4e86b1" attributeName="fill" begin="mouseover"/>
    <animate fill="freeze" dur="0.1s" to="#4e86b1" from="#000000" attributeName="fill" begin="mouseout"/>
  </path>
  <path d="M14 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v41c0 8.2 9.2 17 20 17s20-9.2 20-20c0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z">
    <animate fill="freeze" dur="0.1s" to="#4e86b1" from="#000000" attributeName="fill" begin="mouseover"/>
    <animate fill="freeze" dur="0.1s" to="#000000" from="#4e86b1" attributeName="fill" begin="mouseout"/>
  </path>
  </svg>


CSS3 애니메이션

<object> 또는 인라인에서만 구현됩니다. 이전에 설명한대로 외부 CSS에서도 작동합니다.


이미지 확인하기 https://goo.gl/ckpd3h



<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 65">
  <style type="text/css">
    <![CDATA[
    .firstb { fill: #000; transition: fill 0.1s; }
    .firstb:hover { fill: #4e86b1; }
    .secondb { fill: #4e86b1; transition: fill 0.1s; }
    .secondb:hover { fill: #000; }
    ]]>
  </style>
  <path class="secondb" d="M42 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v21l12 15-7 15.7c14.5 13.9 35 2.8 35-13.7 0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
  <path class="firstb" d="M14 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v41c0 8.2 9.2 17 20 17s20-9.2 20-20c0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
</svg>