본문 바로가기
728x90
300x250
SMALL

Front-end313

SVG 타원 <ellipse> SVG로 타원을 그리기 위해서는 요소를 사용한다. 만드는 방법과 유사한데 차이점은 타원은 x y 반경이 서로 다르고 원은 x y반경이 동일 하다는 점이다. cs속성 : 타원 중심의 x좌표 정의 cy속성 : 타원 중심의 y좌표 정의 rx 속성 : 수평 반경 정의 ry 속성 : 수직 반경 정의 타원 겹쳐서 여러개 표현하기 출처 : https://www.w3schools.com/graphics/svg_ellipse.asp 2022. 1. 30.
chart.js 수평막대그래프 만들기 지난 포스팅에서 수직 막대그래프를 만들었는데 이번에는 수평 막대그래프를 만드는 방법이다. 엄청 간단하다. 수직 막대그래프와 동일한 방식으로 만든 후에 options값만 추가하면 된다. options:{ indexAxis: 'y' //수평차트 만들기 } 전체 스크립트 코드 const ctx3 = $('#test-chart3'); const myChart3 = new Chart(ctx3, { type:'bar', data:{ labels:['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets:[ { label:'2021', data:[10,8,6,5,12,7], backgroundColor:["#ff0000","#0000ff","yellow","g.. 2022. 1. 29.
svg 원 그리기 <circle> 는 원을 만들때 사용하는 태그이다. html css .svg-box .svg {width: 160px; height: 160px;} .circle1 { fill: #317773; } 코드 설명 cx : 원을 중심으로 x 좌표값을 설정 cy : 원을 중심 y 좌표값을 설정 cx, cy 값이 생략되면 기본값은 (0,0) r : 원의 반지름 설정 stroke : 선의 색상 stroke-width : 선의굵기 fill : 원의 내부 색상 참고 https://www.w3schools.com/graphics/svg_circle.asp https://developer.mozilla.org/ko/docs/Web/SVG/Element/circle 2022. 1. 28.
svg란? SVG(Scalable Vector Graphics) 확장가능한 벡터 그래픽 마크업 언어이다. XML 기반의 2차원 그래픽 으로 검색, 인덱싱, 스크립트 및 압축이 가능하다. 아이콘, 이미지, 그래프, 사용자 인터페이스(UI)등 널리 쓰인다. DOM의 일부로서 각 객체별로 HTML엘리먼트가 추가되며 벡터 기반이기 때문에 모든 사이즈에서 선명함이 유지되며 CSS, 자바스크립트등 으로도 조작이 가능하도록 설계되어있다. 에디터와 일러스트 벡터 방식의 소프트웨어 에서도 작성할 수 있으며 용량도 크지 않다. 2022. 1. 27.
728x90
반응형
LIST