SVG 파일의 CSS 애니메이션

다양한 해상도를 제공하는 기기의 등장으로 인하여 SVG이미지의 사용도가 높아지고 있습니다.

아직 IE에서 SVG 애니메이션을 지원하지 않지만 차차 개선되면  GIF이미지의 색상의 한계점을 극복하며 더욱 자연스러운 움직임을 보여줄 수 있을거라 생각합니다.

ico_error1.svg

애니메이션이 적용되지않은 SVG파일을 준비합니다.

<style>

      .cls-1 {

        stroke: #b00e0f;

        stroke-linejoin: round;

        stroke-width: 2px;

        filter: url(#filter);

      }

      .cls-1, .cls-2 {

        fill-rule: evenodd;

      }

      .cls-2 {

        fill: #fff;

      }

    </style>

SVG파일내에 위와같이 <style>영역이 지정되어있습니다.

<style>

      .cls-1 {

        stroke: #b00e0f;

        stroke-linejoin: round;

        stroke-width: 2px;

        filter: url(#filter);

      }

      .cls-1, .cls-2 {

        fill-rule: evenodd;

      }

      .cls-2 {

        fill: #fff;

      }

     

      #filter feFlood{flood-opacity:0.3; opacity:0; animation:glow 2s ease-in-out infinite;}

     

@keyframes glow{

0%{flood-opacity:0.1;}

50%{flood-opacity:0.3;}

100%{flood-opacity:0.1}

}

#Rounded_Rectangle_961{transform-origin:center; width:100%; animation:mark 1.5s ease-in-out infinite; }

  @keyframes mark{

  0%{opacity:1; transform:scale(1);}

50%{opacity:0.5; transform:scale(0.9);}

100%{opacity:1; transform:scale(1);}

  }

 

 

    </style>

SVG파일 <style>영역 내에 애니메이션을 추가해줍니다. 저는 SVG파일에 지정되어있는 ID값을 그대로 사용했습니다.

ic_error.svg

애니메이션을 적용한 최종 결과물입니다.(ie를제외한 브라우저에서 확인해주세요)

***SVG의 애니메이션은 아직 IE에서 "not supported"단계입니다.