path d 명령어 — M, L, Z

Figma vector, Illustrator path, SVG <path d="...">는 결국 segment 연결입니다. 문자열 d는 그 목록의 압축 표기입니다.

M, L, Z

대문자는 절대 좌표, 소문자는 상대 좌표입니다.

내부 모델

편집기는 d 문자열만 들고 있으면 수정이 어렵습니다. 보통은 segment graph를 씁니다.

type Segment =
  | { type: "M"; point: Point }
  | { type: "L"; from: Point; to: Point };

svg-matrix-core의 parsePathD / pathDFromSegments가 이 최소 파이프라인을 보여줍니다. (parsePathMoveLine은 동일 함수의 별칭입니다.)

오늘의 핵심

d는 저장 형식이고, segment가 진짜 모델입니다. H/V/C/Q/A는 007부터 parser가 확장합니다.