path 엘리먼트

path

• 선, 곡선, 호 등 다양한 형태를 그릴 수 있음
• 여러개의 직선과 도형을 합쳐서 복잡한 도형을 만들 수 있음

모양 정의 방법

• d 속성으로 모양을 정의한다.
• d는 여러개의 명령어와 그 파람미터들로 이뤄짐
• 예를 들어 XY 좌표계를 (10, 10)로 이동할 때, 'Move To' 명령어를 사용하는 데, 알파벳 M으로 호출한다.
  • 즉, M 10 10은 (10, 10)으로 이동하라는 의미
• d는 단위를 사용하지 않는다.
• 명령어는 2개의 형태가 존재
  • 대문자: 페이지의 절대 좌표
  • 소문자: 마지막 위치에 대한 상대적 좌표

명령어

직선 명령어

https://svgwg.org/svg2-draft/paths.html#PathDataLinetoCommands

• 선 그리기(lineto): L x y 혹은 l dx dy
• 가로선 그리기(horizontal lineto): H x 혹은 h dx
• 세로선 그리기(vertical lineto): V y 혹은 v dy
• 닫기(closepath): Z 혹은 z. 현 위치에서 시작점으로 직선을 그림
  • https://svgwg.org/svg2-draft/paths.html#PathDataClosePathCommand

곡선 명령어

https://svgwg.org/svg2-draft/paths.html#PathDataCubicBezierCommands

• C(curveto)
  • 3차 베이지 곡선
  • C <제어점1> <제어점2> <좌표> 형태
    • 각 끝점의 제어점으로 곡선을 만듬
  • C x1 y1, x2 y2, x y 혹은 c dx1 dy1, dx2 dy2, dx dy
• S(shorthand/smooth curveto)
  • 3차 베이지 곡선
  • S <제어점1> <좌표> 형태
    • 시작점은 이전 좌표의 제어점을 뒤집에서 사용함
  • S x1 y1, x y 혹은 s dx1 dy1, dx dy

https://svgwg.org/svg2-draft/paths.html#PathDataQuadraticBezierCommands

• Q(quadratic Bézier curveto)
  • 2차 베이지 곡선
  • Q <제어점1> <좌표> 형태
    • 하나의 제어점으로 양끝의 점의 제어해서 곡선을 만듬
  • Q x1 y1, x y 혹은 q dx1 dy1, dx dy
• T(Shorthand/smooth quadratic Bézier curveto)
  • 2차 베이지 곡선
  • T <좌표> 형태
    • 이전 좌표의 제어점을 뒤집에서 사용
  • T x y 혹은 t dx dy

원호

https://svgwg.org/svg2-draft/paths.html#PathDataEllipticalArcCommands

• A(elliptical arc)
  • A rx ry large-arc-flag sweep-flag x y 혹은 a rx ry large-arc-flag sweep-flag dx dy
    • rx, ry: 해당 축의 반지름
    • large-arc-flag: 중심각이 180도 이상이 될지 결정
    • sweep-flag: 호가 이동해야 할 각이 음인지 양인지 결정