SMIL — animateTransform

<animateTransform>로 transform을 회전·이동·스케일합니다. 002 matrix와 같은 계열입니다.

데모에서 볼 것

• <g transform="translate(320,100)"> 안 주황 rect
• rotate 0→360, 4s
• readout: buildAnimateTransformMarkup XML

import { buildAnimateTransformMarkup } from "svg-matrix-core";

buildAnimateTransformMarkup({
  type: "rotate",
  from: 0,
  to: 360,
  dur: "4s",
  additive: "sum"
});

additive="sum" — 기존 transform에 누적 (translate 고정 + rotate).

type 표

Core API

관련

• 002 · 080 transform path vs group

오늘의 핵심

transform 애니는 보통 <g> 에 둡니다 — d는 local, matrix만 시간에 따라 변합니다.