글자가 그려지는 애니메이션(with, stroke-dashoffset)
이번 시간에는 stroke-dashoffset, stroke-dasharray를 사용해, svg의 text 애니메이션을 만들어본다. 1. 미리보기 See the Pen alpha-svg by KumJungMin (@kumjungmin) on CodePen. 2. 코드 분석 1) html (1) 전체 구조 content는 svg의 부모로, svg를 수직 중앙 정렬시킨다. svg 내부에서는 여러 text태그가 존재하며 글자 각각을 의미한다. (2) 전체 코드 위 그림을 코드로 보면 아래와 같다. 만약 svg태그에 대해 궁금하면 바로 (3)을 읽어보는 걸 추천 :) S V G T E S T (3) svg태그란? html에서 사용된 svg에 대해 간단히 알아보자 우리가 image로 주로 사용하는 png, jpg..
2021. 10. 11.
