SVG defs
<defs><defs>요소 내부에서 생성된 객체는 즉시 렌더링되지 않습니다. 랜더링에 영향이 없고 메모리에 저장되어 속도가 빠릅니다. 절대좌표 또는 상대좌표를 사용 할 수 있습니다. 참조하는 곳에 0,0을 작성하고 절대좌표로 작성하면 원하는 곳에 좌표처리가 편합니다. 위 코드와 같이 <g>태그안에 있는 요소들은 랜더링 되지
카테고리: frontend
SVG g
<g>div element와 같은 기능을 한다고 생각하면 됩니다. g에 속한 엘리먼트의 공통 속성을 작성 할 수 있습니다. 각 엘리먼트에 이벤트를 설정하지 않고 <g>에 작성하면 한번에 이벤트 설정이 가능합니다. 시멘틱적으로 하나의 그룹을 만들어 시멘틱을 부여할 때 사용합니다. 위 코드와 같이 <g>안에 모든 stroke는
SVG Polyline
PolylineSVG를 이용하여 꺾은선을 나타낼 수 있습니다. 홈페이지 주식 차트 등 여러 그래프 차트에 사용이 가능합니다. 꺾은선은 선이지만 선 아래쪽을 면으로 인식하여 fill요소를 사용할 수 있습니다. 도형 내부를 체우지 않으려면 fill=none을 사용해야합니다. 속성 이름 값 형태 개요 points <list-of-points>
SVG Polygon
PolygonSVG를 이용하여 다각형을 나타낼 수 있습니다. 속성 이름 값 형태 개요 points <list-of-points> x좌표,y좌표 한 쌍 빈공백 또는 줄바꿈으로 좌표 구분
SVG Ellipse
EllipseSVG를 이용하여 타원형을 그릴 수 있습니다. 속성 이름 값 형태 개요 cx <coordinate> x축 원 중심 좌표 cy <coordinate> y축 원 중심 좌표 rx <length> 반지름 너비 ry <length> 반지름 높이
SVG Circle
CircleSVG를 이용하여 원을 그릴 수 있습니다. 다른 모형에선 좌상단이 좌표의 기준이 되지만 원은 원의 중심이 좌표의 기준이 됩니다. 속성 이름 값 형태 개요 cx <coordinate> x축 원 중심 좌표 cy <coordinate> y축 원 중심 좌표 r <length> 반지름
SVG Rect
RectSVG를 이용하여 사각형을 그릴 수 있습니다. 속성 이름 값 형태 개요 x <coordinate> 좌표 y 좌표 width <length> 폭 heignt 높이 rx 가로 코너 반경 ry 수직 코너 반경 SVG는 만든 순서대로 쌓입니다. 따라서 가장 먼저 SVG를 생성하였다면 가장
SVG Line
LineSVG를 이용하여 선을 그릴 수 있습니다. 속성 이름 개요 x1 x축 시작 좌표 값 y1 y축 시작 좌표 값 x2 x축 끝 좌표 값 y2 y축 끝 좌표 값 stroke(line color)stroke를 사용하여 선의 색상 선의 종류 두께 등 선의 스타일을 지정 할 수 있습니다. stroke를 작성하지 않으면 선이 보이지
SVG
SVG란?Scalable Vector Graphics의 약어로써 직역하면 확장 가능한 벡터 그래픽이란 뜻입니다. SVG를 이용하여 벡터형식의 2차원 그래픽을 표현 할 수 있습니다. SVG는 자동으로 확대, 축소를 대응합니다. HTML5부터 SVG엘리먼트로 구현되었습니다. 향후 데이터 시각화를 통해 데이터의 그래프 표현과 iot, 빅데이터로 인한 필요성 증가
transition
transitionCSS로 효과를 주게되면 변화는 즉시 실행됩니다. 하지만 transition효과를 사용하게 되면 지정한 시간동안 변하도록 효과를 줄 수 있습니다. transition-propertytransition-property는 변화의 대상이 되는 CSS의 프로퍼티를 지정해 줄 때 사용합니다. 지정하지 않는 경우 모든 property가 지정됩니다.