728x90 반응형 분류 전체보기298 [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. [자바스크립트플러그인]원형(도넛) 차트 그려주는 플러그인 옵션설정 https://github.com/rendro/easy-pie-chart rendro/easy-pie-chart easy pie chart is a lightweight plugin to draw simple, animated pie charts for single values - rendro/easy-pie-chart github.com 차트를 직접그릴수 있지만,, [CSS] - [CSS]CSS만을 이용해서 차트 그리기 이글에서 소개한 방법은 반원만 가능하다.... [CSS] - [CSS]그라디언트를 이용해 간단하게 원형차트/도넛차트 그리기(애니메이션으로 차트그리기 ) 이글에서 소개한 방법은 실제 웹사이트에 적용시 버벅거림 현상이 보인다.. 이러한 여러가지 단점들을 보안하기위해 플러그인을 쓰는것도 좋다.. 2019. 5. 27. [SVG]svg 시작해보기1 - 기본도형 그리기 가장 기본적으로 svg 를 감싸는 svg태그 width 와 height 로 svg 가 보여질 영역을 정한다. xmlns - svg는 xhtml 이기때문에 지정해준다. viewbox의 값은 svg가 어디에서 보일지 x y 좌표와 width height 값을 말한다. 기본적인 도형을 그려보자 1. 사각형 그리기 (rect) x / y 시작할 x,y 좌표 rx / ry 사각형 모서리의 radius 값 width / height 사각형의 크기 fill 도형을 채울 색 stroke border 색 stroke-width border 두께 2. 원그리기 cx / xy 원의 중심 좌표 r 원의 반지름 3. 타원 cx / xy 타원의 중심 좌표 rx 타원의 가로 반지름 ry 타원의 세로 반지름 4. 선 x1 / y1 .. 2019. 5. 24. 이전 1 ··· 46 47 48 49 50 51 52 ··· 75 다음 728x90 반응형
