SVG Path
<path><path>요소는 모양을 정의하는 일반적인 요소입니다. d속성 안에 M(m)과 L(l)은 좌표이고 대문자는 절대좌표 소문자는 상대좌표입니다. 속성 이름 값 형태 개요 d path data path 데이터 M(m) <coordinate> x좌표,y좌표 한 쌍 빈공백 또는 줄바꿈으로 좌표 구분 L(l
카테고리: svg
SVG title, desc
<title><title>요소는 웹접근성에 의해 그래픽 요소로 렌더링 되지 않습니다. <title>요소를 툴팁으로 표시 할 수 있습니다. 스크린리더, 검색엔진에 반영됩니다. <title>요소는 웹접근성을 향상시킵니다. <title>요소를 사용하게 되면 해당 도형에 마우스를 올려두면 아래와 같이 titl
SVG symbol
<symbol><symbol>요소는 템플릿 객체를 정의하는데 사용됩니다. 다수의 <symbol>을 <use>요소로 인스턴스화 할 수 있습니다. <symbol>은 너비와 높이를 바꿀 수 없습니다. viewbox를 작성하면 속성을 변경 할 수 있습니다. 위 코드와 같이 <symbol>태그안에 있
SVG use
<use><use>태그는 다른 엘리먼트를 참조 할 때 사용합니다. 엘리먼트 내 요소들이 설정되었더라도 참조되는 설정이 바뀌게 되면 바뀐 설정이 적용됩니다. 참조는 xlink:href="#id_name"를 사용하여 링크를 연결합니다.
SVG defs
<defs><defs>요소 내부에서 생성된 객체는 즉시 렌더링되지 않습니다. 랜더링에 영향이 없고 메모리에 저장되어 속도가 빠릅니다. 절대좌표 또는 상대좌표를 사용 할 수 있습니다. 참조하는 곳에 0,0을 작성하고 절대좌표로 작성하면 원하는 곳에 좌표처리가 편합니다. 위 코드와 같이 <g>태그안에 있는 요소들은 랜더링 되지
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> 반지름