SVG transform（x/y/rotate/scale）

SVG 元素也能像普通 DOM 一样做 transform 动画：x/y、rotate、scale。这类通常会走 WAAPI，性能也更稳。

建议：如果你要做“动起来的图标/插画”，优先用 transform（位移/旋转/缩放），再配合 opacity / filter。

SVG transforms code example

JavaScript

HTML

CSS

xjs('#b1').animate({ x: '6rem', rotate: '1turn' }); xjs('#b2').animate({ y: '-3rem', scale: [1, 1.35] });

.box { transform-box: fill-box; transform-origin: center; }

功能说明：
- 对 SVG 做 transform 动画时，建议设置 transform-box 和 transform-origin，旋转更符合直觉。
- 你可以把多个图形组合成一个小“角色”，用一套参数让它动起来。

distance 96px

duration 900ms

SVG