SVG란?
확장 가능한 벡터 그래픽(Scalable Vector Graphics), SVG는 그래픽을 마크업하기 위한 W3C XML의 특수언어(diaelct)입니다. SVG는 파이어폭스, 오페라, 웹킷 브라우저, 인터넷 익스플로러 및 기타 여러 브라우저에서 부분적으로 지원하고 있습니다.
SVG 렌더링 순서 파일 전체에서 유효한 규칙은, 내용의 위에서 부터 아래로 렌더링 된다.
웹브라우저에서 SVG를 사용할경우 version, xmlns, xmlns:xlink 다음속성은 필요하지 않다.
1 2 3 4 5 6 7 8 | <svg version="1.1" xmlns=http://www.w3.org/2000/svg xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600" viewBox="0 0 600 600"> ... </svg> | cs |
SVG 위치요소
왼쪽 위 모서리는 (0,0)으로 간주되며 한 지점의 위치는 왼쪽 상단 모서리에서 픽셀 단위로 표시되고 X축의 양의 방향은 오른쪽, Y축의 양의 방향은 아래쪽으로 향한다.
SVG픽셀단위
SVG 문서에서 1픽셀은 출력 장치(화면)의 1픽셀에 매핑된다. SVG는 사용자단위(User Unit) 기준으로한다. 별도로 명시하지 않을경우 사용자단위와 화면단위는 1:1 비율로 동작한다.
SVG기본도형
rect
rect는 사각형을 그린다.
1 2 | <rect x="10" y="10" width="30" height="30"/> <rect x="60" y="10" rx="10" ry="10" width="30" height="30"/> |
x |
사각형의 좌측상단 x값 |
y |
사각형의 좌측상단 y값 |
width |
사각형의 폭을 나타낸다. |
height |
사각형의 넓이를 나타낸다. |
rx |
사각형의 둥근 꼭짓점의 x 방향으로의 반지름이다. |
ry |
사각형의 둥근 꼭짓점의 y 방향으로의 반지름이다. |
Circle
circle 은 화면에 원을 나타낸다.
1 | <circle cx="25" cy="75" r="20"/> | cs |
cx |
원의 중심 중 x 값을 의미한다. |
cy |
원의 중심 중 y 값을 의미한다. |
r |
원의 반지름 |
Line
line 요소는 선의 시작과 끝 지점을 지정하는 두 점을 속성으로 갖는다.
x1 |
점 1의 x값 |
y1 |
점 1의 y 값 |
x2 |
점 2의 x 값 |
y2 |
점 2의 y 값 |
Polyline
연결된 직선들의 그룹이다. 목록들이 길어질 수 있기 때문에 모든 포인트가 하나의 속성에 포함된다.
각 포인트는 X좌표와 Y좌표를 가지고 있어야한다. 포인트 목록 (0,0), (1,1) 및 (2,2)는 "0 0, 1 1, 2 2" 라고 쓸 수 있다.
1 | <polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/> | cs |
Polygon 다각형
점을 연결하는 직선으로 구성된다는 점에서 polyline과 유사하나, 마지막 포인트로부터 첫 번째 포인트로 직선을 만들어서 닫힌 모양을 만든다. 사각형은 다각형의 하나이므로, 융통성있는 사각형을 필요로 하는 경우 polygon 요소를 사용해서 rect 요소를 만들 수 있다.
1 | <polygon points="200 10, 250 190,160 210"></polygon> | cs |
Ellipse 타원
원의 x와 y 반경을 개별적으로 확장 할 수 있는 circle 요소의 좀 더 일반적인 형태이다.
1 | <ellipse cx="75" cy="75" rx="20" ry="5"/> | cs |
rx |
타원의 x 방향으로의 반지름의 길이를 의미한다. |
ry |
타원의 y 방향으로의 반지름의 길이를 의미한다. |
cx |
타원의 중심 중 x 값을 의미한다. |
cy |
타원의 중심 중 y 값을 의미한다. |
기본도형 실습하기 1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | svg { background: pink; } line { stroke:red; stroke-width:15; } rect, circle { stroke:red; stroke-width:5; stroke-opacity:.7; fill:blue; fill-opacity:.6; } text { fill:green; } | cs |
1 2 3 4 5 6 7 | <svg width="600" height="600"> <line x1="0" y1="0" x2="100" y2="100" /> <rect x="120" y="120" width="100" height="50" /> <circle cx="350" cy="150" r="50" /> <ellipse cx="350" cy="350" rx="100" ry="50" /> <text x="100" y="20">SVG Basics</text> </svg> | cs |
Path 앨리먼트는 SVG 기본 도형 라이브러이에서 가장 강력한 엘리먼트이다. 패스는 여러 개의 직선과 곡선을 합쳐서 복잡한 도형을 그릴 수 있게 해준다. 패스의 모양은 d 속성 하나로 정의된다. d 속성은 여러 개의 명령어와 그 파라미터들로 이루어진다. d속성의 좌표는 절대 단위가 붙지않는다.
'Move To(이동하기)' 혹은 'M'
'D3.js' 카테고리의 다른 글
| Quantize Scale , Quantile Scale ,[d3.scaleQuantile vs d3.scaleQuantize] (0) | 2019.02.12 |
|---|---|
| D3 LineScale (0) | 2019.02.08 |
| d3 중요문법 정리 (0) | 2019.02.06 |
클라인STR