svg path 길이 구하는 법 & 애니메이션(animation)

$(function(){
  $('svg').find('path').each(function(i, path){
    var length = path.getTotalLength();
    alert(length);
  })
});

학원에서는 path의 길이 구하는 법을 위와 같은 방법으로 배웠다

 

let path = document.querySelector('path').getTotalLength();
console.log(path); //alert(path)

이건 인터넷에서 찾은 코드인데 (console.log 또는 alert이용하면 된다)

나는 밑에 방법이 더 직관적으로 보여서 밑에 방법이 나은 것 같다..

 

제이쿼리는.. 따로 기초라든지 공부를 한 적이 없고 무작정 학원에서 배운대로 따라쓰기만 해서 그런지

코드쓸 때 더 복잡하고 불편하게 느껴진다

자바스크립트로 충분히 쓸 수 있는 것을 제이쿼리로 쓰는 과정이 불필요하고 불편하게 느껴진다..

나중에 실무에서는 어떤 걸 주로 쓰게 될지 모르겠지만..

얼마전에 본 드림코딩 엘리님 강의에서는 이제 자바스크립트도 좋은 api들이 많이 나왔기 때문에 더이상 제이쿼리를 쓰지 않아도 된다고 하였다

 

 

아무튼 이런 방법으로 구한 path의 길이를 이용해서 애니메이션을 구현할 수 있다.

path {
  animation-name: dash; 
  animation-duration: 2s; 
  stroke-dasharray: 510; 
  stroke-dashoffset: 0;
}

@keyframes dash {
  0% {stroke-dashoffset: 510;}
  100% {stroke-dashoffset: 0;}
}

dasharray는 선을 대쉬형태(점선)로 만들기 위한 수치를 정해주는 속성이다

선을 점선으로 만들지 않기 위해 path의 전체 길이를 적어주어야 한다

 

stroke-dashoffset은 선이 어떤 지점에서부터 시작할지 정해주는 속성으로,

만약 선이 그려지는 방향을 반대로 만들고 싶다면 앞에다 -(마이너스)를 붙여주면 된다.

 

 

 

---

참고

🔗