728x90 반응형 CSS/SVG9 [SVG]텍스트 애니메이션 효과 관련 참고 사이트 https://bashooka.com/coding/20-cool-svg-text-effects/ 20 Cool SVG Text Effects – Bashooka SVG text is fully accessible, searchable, selectable and 100% semantic. So here are 20 amazing & cool SVG text effects that will give you ideas as a starting point for creating cool SVG content. bashooka.com [CSS/SVG] - [SVG]svg 시작해보기1 - 기본도형 그리기 [CSS/SVG] - [SVG]svg 시작해보기2 - path 도형그리기 [CSS/SVG] - [SVG]svg.. 2019. 5. 27. [SVG]svg시작해보기 4 - path그리기 애니메이션 stroke-dashoffset : 1000 stroke-dashoffset 이란 총 길이를 1000이라고 가정한다 아래는 5초동안 0에서 1000까지 그려지는 애니메이션 See the Pen svg ai path animation by gahyun (@gahyun) on CodePen. See the Pen hover svg by gahyun (@gahyun) on CodePen. 2019. 5. 27. [SVG]svg 시작해보기3 - TEXT svg 안에 를 이용해 글자를 넣습니다. x,y 텍스트가 위치할 위치를 지정합니다. dx, dy x,y를 기준으로 이동시키는 상대좌표를 지정합니다. rotate 각 글자수 마다 회전 각도를 지정할수 있습니다. (갯수가 일치하지않으면 별도 설정값을 갖지못할 글자는 모두 마지막 설정을 갖게 됩니다 ) textLength 텍스트 길이를 설정합니다. (이 길이 값에 따라 글자간의 간격이 조정됩니다.) letter-spacing 글자 간격 조정 word-spacing 단어 간격 조정 text-decoration 글자 꾸밈 (overline / underline / line-through ..) 을 이용해 글자를 나눠서 각 글자마다 설정을 다르게 줄 수 있습니다. dy 각 tspan요소의 높이 지정 See the .. 2019. 5. 27. [SVG]svg 시작해보기2 - path 도형그리기 path를 통해 기본도형보다 더 복잡한 모양의 그림을 그릴 수 있습니다. path에 클래스를 할당해서 CSS를 적용할 수도 있습니다. See the Pen joKOqO by gahyun (@gahyun) on CodePen. 그룹으로 묶기도하고 use를 이용해 그룹을 복사해서 쓸수도 있다. See the Pen svg ai by gahyun (@gahyun) on CodePen. 2019. 5. 27. 이전 1 2 3 다음 728x90 반응형