point at length와 tangent

총 길이 017 L이 있으면, **거리 s ∈ [0, L]**에서의 점과 접선을 묻습니다. textPath 글자 배치, 화살표 방향, motion path 위치가 같은 sampling입니다.

API

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

const segments = parsePathD("M 60 300 C 160 80, 480 340, 580 120");
const total = pathLength(segments, { stepsPerCurve: 24 });

const sample = pointAtPathLength(segments, total * 0.35, {
  stepsPerCurve: 24
});
// {
//   point: { x, y },
//   tangent: { x, y }   // 단위 벡터 — flatten edge 방향
// }

내부: flattenPathSegments → pointAtPolylineLength(polyline, s).

polyline 위 보간

s가 edge i 안이면:
  point = lerp(pᵢ₋₁, pᵢ, t)
  tangent = normalize(pᵢ − pᵢ₋₁)

데모 (path-length / path-point 공용)

• distance along path 슬라이더 — s 변경
• 주황 marker — sample.point
• readout: tangent=(tx, ty) — 다음 점 방향

stepsPerCurve가 작으면 tangent가 들쭉 — 016과 같이 step↑ 또는 adaptive.

회전에 쓰기

const angle = Math.atan2(sample.tangent.y, sample.tangent.x);
// SVG: transform={`rotate(${deg} ${sample.point.x} ${sample.point.y})`}

090 SMIL rotate="auto" — 브라우저가 동일 질문을 내부 처리.

textPath · motion

균일 속도 — parameter t≠균일 s. 095 sampleMotionAlongPathUniform.

flatten tangent vs 해석적 법선

textPath·화살표는 보통 flatten tangent로 충분. inside stroke offset은 070.

native 비교 (097)

pathEl.getPointAtLength(s);  // DOM, flatten 내부
// vs
pointAtPathLength(segments, s, opts);  // segment graph, 편집 중

Core API

• pointAtPathLength, pointAtPolylineLength
• pathLength, flattenPathSegments
• sampleMotionAlongPath, buildArcLengthLookup — 094, 095
• cubicNormalAt — 070

관련

• 017 L · 016 flatten 품질 · Part 23–24 motion

오늘의 핵심

motion·textPath = path grammar + length sampling. s→(point,tangent)까지 svg-matrix, 언제 s가 시간에 매핑되느냐는 animation 레이어(094, css-matrix).