[CSS] svg에 animation 적용하기

SVG

SVG의 장점

• SVG 이미지는 확대 축소 시에도 깨지지 않는다.
• 애니메이션을 추가할 수 있다.
• 용량이 적어 빠르다.

SVG의 단점

• IE 하위에서는 작동하지 않는다.
• 복잡한 svg를 구현 시 속도가 저하된다.
  
  

width, height, viewBox

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

svg 크기는 width와 height로 조정 가능하며, viewBox를 이용해 svg의 기준점과 배율을 정할 수 있다.

 

viewBox  = "min-x, min-y, width, height"를 의미하며 아래처럼 작성 시 !

<svg width="100" height="100"  viewBox="0 0 50 50">
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg> 

<svg width="100" height="100"  viewBox="0 0 100 100">
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg> 
 
<svg width="100" height="100"  viewBox="0 0 500 500">
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

위의 코드 적용 화면

화면에 이런 식으로 나오는 걸 볼 수 있다.

 

 

TEXT (fill, stroke, stroke-width, stroke-dasharray)

SVG <text>요소는 텍스트로 구성된 그래픽 요소를 그린다

<svg viewBox="0 0 240 80" >
  <style>
    .small {
      font: italic 13px sans-serif;
    }
    .heavy {
      font: bold 30px sans-serif;
      stroke:green;
  	stroke-width: 1px;

    }

    .Rrrrr {
      font: italic 40px serif;
      fill: red;
      stroke:yellow;
  	  stroke-width: 1px;
      stroke-dasharray:5px 10px ;
    }
    
  </style>

  <text x="20" y="35" class="small">My</text>
  <text x="40" y="35" class="heavy">cat</text>
  <text x="55" y="55" class="small">is</text>
  <text x="65" y="55" class="Rrrrr">Grumpy!</text>
</svg>

위의 코드 적용 화면

위처럼 입력시 그림처럼 출력된다.

x,y로 위치를 지정하고 class를 주어 style을 주는 게 가능하다.

 

위에 적용된 style은 각각 설명하자면 아래와 같다.

• fill: text의 색상
• stroke: 선의 색상
• stroke-width: 선의 굵기
• stroke-dasharray: 점선의 간격

여기서 stroke-dasharray는 점선의 길이와 점선끼리의 간격을 의미한다.

 

 

 

stroke-dashoffset

animation을 적용할 때 제일 중요한 요소인 stroke-dashoffset은 점선의 시작점을 지정한다.

<svg viewBox="0 0 240 80" >
  <style>
    body {
  	  background: #ddd
    }
    .small {
      font: italic 13px sans-serif;
    }
    .heavy {
      font: bold 30px sans-serif;
      stroke:green;
  	  stroke-width: 1px;
    }

    .Rrrrr {
      font: italic 40px serif;
      fill: red;
      stroke:yellow;
  	  stroke-width: 1px;
      stroke-dasharray:30px 50px;
      stroke-dashoffset : 0px
    }
    
  </style>

  <text x="20" y="35" class="small">My</text>
  <text x="40" y="35" class="heavy">cat</text>
  <text x="55" y="55" class="small">is</text>
  <text x="65" y="55" class="Rrrrr">Grumpy!</text>
</svg>

stroke-dashoffset : 0px

stroke-dashoffset : 25px

stroke-dashoffset : 50px

 

 

animation 추가하기

stroke 효과가 없다가 생겨나게 하고 싶다면  먼저 stroke-dasharray로 text 전체를 감싸도록 만들고,  animation 효과로 stroke-dashoffset를 0으로 만드는 것이다.

<svg viewBox="0 0 240 80" >
  <style>
    body {
  	  background: #ddd
    }
    .small {
      font: italic 13px sans-serif;
    }
    .heavy {
      font: bold 30px sans-serif;
      stroke:green;
  	  stroke-width: 1px;
    }

    .Rrrrr {
      font: italic 40px serif;
      fill: red;
      stroke:yellow;
  	  stroke-width: 1px;
      stroke-dasharray:350px ;
      stroke-dashoffset: 100px;
      animation: dash 5s linear infinite;
    }
    
    @keyframes dash {
      from {
        stroke-dashoffset: 350px;
      }
      to {
        stroke-dashoffset: 0;
      }
    }
  </style>

  <text x="20" y="35" class="small">My</text>
  <text x="40" y="35" class="heavy">cat</text>
  <text x="55" y="55" class="small">is</text>
  <text x="65" y="55" class="Rrrrr">Grumpy!</text>
</svg>

 

text가 아닌 다른 것에서도 가능하다

<svg viewBox="0 0 340 333">

  <path class="path" fill="white" stroke="black" stroke-width="4" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
  s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
  C46.039,146.545,53.039,128.545,66.039,133.545z"/>
  
</svg>

<style>
.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear alternate infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 822;
  }
  to {
    stroke-dashoffset: 0;
  }
}
</style>

 

 

 

참고 url :

text : https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text

<text> - SVG: Scalable Vector Graphics | MDN

https://css-tricks.com/svg-line-animation-works/ 

How SVG Line Animation Works | CSS-Tricks