SVGPathElement length API
브라우저 getTotalLength / getPointAtLength와 core pathLength / pointAtPathLength를 나란히 비교합니다.
데모에서 볼 것
pathD = M 80 120 C 200 20, 440 220, 560 80
- readout:
getTotalLength()vspathLength(core)getPointAtLength(50%)좌표svgPathElementApiGuide()— native vs core API 목록
import {
pathLength,
pointAtPathLength,
parsePathD,
svgPathElementApiGuide
} from "svg-matrix-core";
const segments = parsePathD(pathD);
pathLength(segments, { stepsPerCurve: 32 });
pointAtPathLength(segments, len * 0.5, { stepsPerCurve: 32 });
차이
| native | core | |
|---|---|---|
| 환경 | DOM <path> | Node·편집기·export |
| arc | 브라우저 내부 | flatten steps 제어 |
| tangent | getPointAtLength + 미소 ε | polyline / 070 |
Core API
| export | 역할 |
|---|---|
pathLength | segments → length |
pointAtPathLength | distance → point |
svgPathElementApiGuide | 대응 표 문자열 |
관련
오늘의 핵심
오프라인·테스트는 core — 브라우저 수치와 steps를 맞춰 검증하세요.