H, V — 축 정렬 직선

H / V는 한 축만 바꾸는 직선의 문법 설탕입니다. 003 L과 같은 L segment로 그려지며, parsePathD가 파싱 시점에 정규화합니다. 편집기·hit test·bbox는 H/V를 몰라도 됩니다.

데모 path

M 80 80 H 520 V 320 h -120 v -80 Z

mountPathCommandDemo — readout에 segment 리스트와 pathDFromSegments rebuild.

• H 520 — y=80 유지, x만 520
• V 320 — x=520 유지, y=320
• h -120 — 상대, x -= 120
• v -80 — 상대, y -= 80
• Z — (80,80)으로 닫기

파서 출력에는 H/V 문자열이 없고 { type: "L", from, to }만 보입니다.

명령 정리

파서 동작

// index.js — 개념
if (upper === "H") {
  pushLine({ x: relative ? current.x + x : x, y: current.y });
}
if (upper === "V") {
  pushLine({ x: current.x, y: relative ? current.y + y : y });
}

pushLine이 from: current, to: 목표인 L segment를 push하고 current를 갱신합니다.

import { parsePathD, pathDFromSegments } from "svg-matrix-core";

const segments = parsePathD("M 10 20 H 100 V 80");
// [
//   { type: "M", point: { x: 10, y: 20 } },
//   { type: "L", from: { x: 10, y: 20 }, to: { x: 100, y: 20 } },
//   { type: "L", from: { x: 100, y: 20 }, to: { x: 100, y: 80 } }
// ]

pathDFromSegments(segments);
// 보통 "M 10 20 L 100 20 L 100 80" — H/V로 다시보내지 않음

implicit L after M

M 다음 토큰이 좌표만 오면 SVG는 **암시적 L**로 이어집니다. H/V도 같은 규칙 안에서 동작합니다 (003).

왜 정규화하나

H/V 전용 편집 분기를 없애면 C/Q/A와 같은 파이프라인을 재사용합니다.

export · 손코딩

다시 H/V로 줄이는 역변환은 선택 사항입니다 (파일 크기·가독성). core pathDFromSegments는 기본 L 출력.

M 0 0 H 100 V 50   ← 사람이 읽기 쉬움
M 0 0 L 100 0 L 100 50   ← 엔진 내부

Figma·Illustrator export가 H/V를 쓰면 import → parsePathD → 편집 → pathDFromSegments.

테스트 예

parsePathD("M 0 0 H 100 V 50 h -20 v -10");
// M + 4개의 L — 상대 h/v 포함

Core API

• parsePathD — H/V → L 정규화
• pathDFromSegments, pathFromD
• parsePathMoveLine — parsePathD 별칭 (이름만 M/L/Z 용도)

관련

• 003 M/L/Z · 008 C · 010 S/T (다른 sugar)

오늘의 핵심

H/V는 저장·가독성용 sugar, segment graph는 L로 충분합니다. 파서 한곳에서 정규화하면 hit·bbox·편집기가 곡선 명령과 같은 코드 경로를 탑니다.