ANIMATION › SVG
SINCE 1.0.0

SVG 属性动画(cx / r / …)

SVG 很多“形状”都由属性控制(比如 cxrstrokeDashoffset)。 这类属性不一定走 WAAPI,但 xjs().animate() 仍然能动画它们(会走 JS fallback)。

直觉理解:“CSS 属性”是写到 style 的;而 SVG 的很多东西是写在 attribute 上的。
在本库里:同一套写法,内部会决定用 WAAPI 还是 JS 去更新。

SVG attributes code example
xjs('#c1').animate({ cx: [96, 224], r: [14, 34], duration: 900, direction: 'alternate', loop: 2 });
<circle id="c1" cx="96" cy="90" r="14" />
.ring.orange { stroke: var(--accent-color); }
.ring.red { stroke: var(--highlight-color); }
功能说明:
- 对 SVG 元素来说,“不是 transform / opacity / filter 的属性”,通常会走 JS 更新属性值。
- 这让你能直接动画 cxrstrokeWidth 等等。
70
900ms
Previous
Next