html svg 태그

html 로 그림을 그릴수 있는 svg 태그 벡터 방식이라는데 태그로 일일히 그림을 그리는것 보다는 그냥 일러에서 그리는게 정신적으로는 편함. ㅡㅡ;;

하지만 유용한 것들이 많아서 그냥 끄적끄적......

svg element 사용법은 다음과 같다.

<svg>

<shapes명 />

</svg>

사용은 일반 html 코딩과 같은 구조 이며 안에 shape명만 적어주면 된다. 

shape 의 종류는 아래와 같다.

Rectangle <rect> 사각형

Circle <circle> 원

Ellipse <ellipse> 타원

Line <line> 선

Polyline <polyline> 꺽이는 선

Polygon <polygon> 다각형

Path <path> 흠... 패치를 어떻게.......그냥 선연결이라고 해야하나?

shape 종류의 사용법

<rect>

<svg>

<rect width="가로" height="세로" style="fill:배경색; stroke-width:선 굵기; stroke:선 색깔;" />

</svg>

박스의 기본 형태이며 width값이나 height값은 일반 html코딩과 다를게 없다. 단 style에 들어가는 내용이 조금 틀리다. 

background-color -> fill

border-widht -> stroke-width

border-color -> stroke

이렇게 주면 된다.

<svg>

<rect x="x좌표값" y="y좌표값" width="가로" height="세로" style="fill:배경색; stroke-width:선 굵기; stroke:선 색깔;" />

</svg>

<svg> 안 shape의 좌표를 지정해 줄수도 있다. x,y 값으로.

<circle>

<svg>

<circle cx="x좌표값" cy="y좌표값" r="반지름" style="fill:배경색; stroke-width:선 굵기; stroke:선 색깔;" />

</svg>

원의 형태이며

박스의 방식과 같으며 단지 틀린 부분이 있다면 좌표값 설정과 반지름의 설정이 바뀌었다.

<ellipse>

<svg>

<ellipse cx="x좌표값" cy="y좌표값" rx="x축반지름" ry="y축 반지름"  style="fill:배경색; stroke-width:선 굵기; stroke:선 색깔;" />

</svg>

타원의 형태이며

원의 방식과 같지만 반지름설정이 틀리다.

<line>

<svg>

<line x1="시작 x좌표값" y1="시작 y좌표값" x2="끝 x좌표값" y2="끝 y좌표값"  style="stroke-width:선 굵기; stroke:선 색깔;" />

</svg>

선은 시작시의 좌표값과 끝나는 점의 좌표값을 입력해주면 된다.

<polyline>

<svg>

<polyline points="x,y x,y x,y x,y"  style="stroke-width:선 굵기; stroke:선 색깔;" />

</svg>

꺽인선은 points를 이용하여 각각의 선을 그어주면 된다.

예시 

points="0,20 20,20, 20,40 40,40 40,80"

이렇게 주게 되면 x=0에서 y=20으로 선을 긋고 다시 x=20에서 y=20 으로 선을 긋는다. 이런식으로 반복하다 보면 계단 형태의 선이 만들어 진다.

<polygon>

<svg>

<polygon points="x,y x,y x,y x,y"  style="fill:배경색; stroke-width:선 굵기; stroke:선 색깔;" />

</svg>

polyline와 같은 방식이며 다른점은 선과 면의 차이 정도......

<path>

솔직히 패치를 쓸꺼면 일러를 쓰는게 ㅜ,.ㅡ

그래도 필요할지 몰라 커맨드 정리

M=시작위치

L=선

H=가로선

V=세로선

C=꺽인선

S=곡선

Q=2차 꺽인선

T=2차 곡선

A=타원형 선

Z=패치 닫음

<svg>

<path d="M100 중간에 각 커맨드에 따른 값 끝에는  Z"   style="fill:배경색; stroke-width:선 굵기; stroke:선 색깔;" />

</svg>

여러 선만을 쓸 경우 Z는 안써도 됨 즉 일러에서 패치를 점을 찍으면서 그림을 그리는 것과 같다. 하지만 그럴려면 에휴.........