svg 로 path 요소로 선긋기
대문자는 절대좌표, 소문자는 상대좌표
M, m | 시작점 지정 |
L, l | 직선 그리기 |
Z, z | 시작점까지 연결하기 |
H, h | 수평선 긋기 |
V, v | 수직선 긋기 |
C, c | 곡선 긋기 |
S, s | 곡선 이어긋기 |
Q, q | 2차원 베지어 곡선 긋기 |
T, t | 2차원 베지어 곡선 이어긋기 |
A, a | 타원이나 호 그리기 |
html)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0"> <title>Insert title here</title> </head> <body> <?xml version="1.0" ?> <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="400px" version="1.1"> <!-- 직선 그리기 --> <!-- Lx좌표,y좌표 --> <path d="M50,50 L200,50 200,100Z" stroke="green" stroke-width="5" fill="none" /> <!-- 수평선 긋기 --> <!-- Hx좌표 --> <path d="M50,150 H200" stroke="green" stroke-width="5" /> <!-- 수직선 긋기 --> <!-- Vy좌표 --> <path d="M250,50 V150" stroke="green" stroke-width="5" /> <!-- 곡선 긋기 --> <!-- C조절점1x,조절점1y 조절점2x,조절점2y 끝점x,끝점y --> <path d="M50,200 C100,250 150,150 200,200" stroke="green" stroke-width="5" fill="none" /> <!-- 곡선 이어긋기 --> <!-- S조절점x,조절점y 끝점x,끝점y --> <!-- 시작지점은 이전 곡선의 마지막 조절점의 반태편 또는 곡선이 없을 경우 마지막 지점이다 --> <path d="M50,250 C100,300 150,200 200,250 S250,200 300,250" stroke="green" stroke-width="5" fill="none" /> <!-- 2차원 베지어 곡선 그리기 --> <!-- Q조절점x,조절점y 끝점x,끝점y --> <path d="M50,300 Q125,350 200,300" stroke="green" stroke-width="5" fill="none" /> <!-- 베지어 곡선 이어긋기 --> <!-- T끝점x,끝점y --> <!-- 시작지점은 이전 곡선의 마지막 조절점의 반태편 또는 곡선이 없을 경우 마지막 지점이다 --> <path d="M50,350 Q125,400 200,350 T300,350" stroke="green" stroke-width="5" fill="none" /> </svg> </body> </html> | cs |
결과
'IT > - 프로그래밍' 카테고리의 다른 글
| HTML5/CSS3 svg의 defs 요소 : 참조를 위한 컨테이너 (0) | 2017.07.24 |
|---|---|
| HTML5/CSS3 svg 로 글자쓰기 (0) | 2017.07.22 |
| HTML5/CSS3 svg 로 다각형 그리기 (0) | 2017.07.20 |
| HTML5/CSS3 svg 로 선그리기 (0) | 2017.07.19 |
| HTML5/CSS3 svg 로 타원 그리기 (0) | 2017.07.18 |