시작은 SVG에서 호( 弧: arc)를 그리는 것에서 비롯하였다. SVG는 정비율 원인 circle 과 ellipse는 있는데 arc 가 따로 있는 건 아니다. pie graph 류를 그릴 땐 꼭 필요한데 path 말곤 뾰족한 수가 없어 보인다. 뭐 이렇게 된거 path 에 대해 전부 다 알아보도록 하자. path는 "명령 숫자 숫자 ..."의 조합인데 각각 의도에 맞는 명령(M,L,H,V,Z,C,S,Q,T,A)와 거기에 맞는 인자들을 잘 넣어서 한방에 그릴 수 있게 한다. 참고로, 각각의 커맨드를 소문자로 쓰면 상대 좌표계로 바뀐다. 인자가 없는 Z의 경우는 어느쪽이던 똑같다. 그냥 생각해봐도 일일이 line 으로 모든 걸 다 그리는 건 비효율적이긴 하다. 어짜피 이런 건 아는 것 보다 "하는" 것이 중요하니까 한번 직접 크롬 개발 환경이라도 열고 해보는 게 좋다. 이동 명령 (M) 직선 명령 (L, H, V) L x y - 현재 점에서 x,y 까지 직선을 긋는다. H x - 현재 점에서 x 위치까지 가로로 직선을 긋는다. V y - 현재 점에서 y 위치까지 세로로 직선을 긋는다. 폐쇄 명령 (Z) - 맨 처음 점으로 되돌아가게끔 직선을 그어 닫힌 면을 만든다. 인자 없는 것이 특징. 곡선명령 (C,S,Q,T) C x1 y1, x2 y2, x y - 현재 점에서 x,y 까지 직선을 그은 것을 Bezier 곡선을 만든다. 현재 점에서 x1,y1만큼, x,y 에서 x2,y2 만큼 핸들을 사용한다. c 즉 상대좌표일 때 주의할 점은 x2 y2는 x,y 기준이 아니라 현재 점 기준. S x2, y2, x y - 이전의 핸들을 연장한다. 아래의 경우를 비교해보자. 둘은 완전히 같은 형태의 곡선을 그리지만 S를 쓰는 쪽이 인자가 하나 적다. <path d="M100 500 C 150 400, 200 500, 200 500 C 250 600, 300 500, 300 500...
Meteor evangelist, IoT, Renoise, Lua, Javascript, Coffeescript