SVG path 길이 계산기

d 속성을 M/L/H/V/C/S/Q/T/A/Z 명령 단위로 나눠 세그먼트별 길이를 구하고 모두 더합니다. 직선(L/H/V)은 두 점 사이 거리로 바로 나오지만, 3차 베지어(C/S)와 2차 베지어(Q/T)는 속도벡터 크기가 제곱근을 포함한 다항식이라 닫힌 식이 없어 수치적분(합성 심프슨 공식)으로 근사합니다. 타원 호(A)는 SVG 명세의 끝점→중심 매개변수 변환을 거친 뒤 같은 방식으로 적분합니다.

직선·베지어 구간은 상대오차 0.001% 이내로 사실상 같습니다. 다만 타원 호(A) 구간은 브라우저(Chromium 기준)가 정확한 적분 대신 호를 베지어로 근사한 뒤 그 폴리라인 길이를 더하는 방식(flattening)을 쓰기 때문에 0.01~0.5% 정도 차이가 날 수 있습니다. 이 계산기는 호의 중심 매개변수를 직접 구해 수치적분하므로, 예를 들어 정확한 원의 4분의 1호는 해석값(π×반지름÷2)과 소수점 9자리까지 일치합니다 — 오히려 이쪽이 더 정확한 값입니다.

path를 서서히 그려지는 것처럼 보이려면 stroke-dasharray와 stroke-dashoffset을 path 전체 길이와 같은 값으로 맞추고 dashoffset을 0까지 애니메이션합니다. 이 길이가 실제보다 짧으면 선이 끝까지 그려지지 않고, 길면 애니메이션 시작 전에 이미 일부가 보입니다. 브라우저 밖(빌드 타임, 디자인 도구)에서는 getTotalLength()를 쓸 수 없어 이런 계산기가 필요합니다.

M(이동) · L/H/V(직선) · C/S(3차 베지어) · Q/T(2차 베지어) · A(타원 호) · Z(닫기)를 모두 지원하고, 절대좌표(대문자)와 상대좌표(소문자) 둘 다 처리합니다. 여러 서브패스(path 중간에 M이 다시 나오는 경우)도 각각 길이를 더합니다.

SVG 명세를 그대로 따릅니다. 반지름이 음수면 절대값으로 바꾸고, 반지름이 0이면 직선으로 처리하며, 두 점을 잇기에 반지름이 너무 작으면 비율을 유지한 채 자동으로 키웁니다(실제 브라우저 렌더링과 같은 규칙입니다).

전송되지 않습니다. 모든 파싱과 계산은 브라우저 안에서 이뤄지고, 입력값은 이 기기에만 남습니다.