Lpla 개발 블로그

etc

[SVG] 애니메이션

SVG SVG로 애니메이션 효과를 만들어보도록 하겠다. 내가 원하는 결과물은 아래와 같다. 먼저 svg파일을 다운받거나 만들어야 한다. 나는 일러스트레이터 패스툴로 금방 그렸다. HTML Asset 2 먼저 svg를 HTML에 붙여넣는다. 코드가 길지만 결국에 선을 나타내는 건 이다. 는 그룹(group)의 약자로 여기선 사용할 일이 없으므로 지워도 상관 없다. Polyline, Path Polyline과 Path는 큰 차이가 없다. 곡선을 나타낼 때 Polyline이 Path보다 더 많은 개수가 사용된다고 하나 크게 의미 없다. 혹시라도 polyline를 path로 바꿔 쓰고 싶다면 아래처럼 코드를 수정하면 된다. 지금은 마지막과 처음을 연결할 일이 없으므로 사용하지 않는다. 어디까지나 설명을 위해서 ..