SMIL — animate 속성

<animate>로 opacity, fill, cx 등 스칼라 속성을 from→to로 보간합니다.

데모에서 볼 것

• 파란 rect — opacity 0.2↔1 2s 반복 SMIL
• readout: 생성된 <animate …> XML 한 줄

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

buildAnimateMarkup({
  attributeName: "opacity",
  from: 0.2,
  to: 1,
  dur: "2s",
  repeatCount: "indefinite"
});

rect에 innerHTML로 <animate> 자식 삽입 — 데모와 동일.

SMIL vs CSS vs WAAPI

오프라인·편집기 preview는 094 JS sampling.

Core API

관련

• 089 · 101

오늘의 핵심

SMIL = 선언형 XML 빌더 — geometry는 svg-matrix, easing 곡선은 css-matrix가 더 깊습니다.