animateTransform是SVG 1.1规范定义的原生动画元素，用于对transform属性执行旋转、缩放、平移等插值动画；它被Chrome、Edge、Safari及2020年后Firefox支持，但必须嵌套在图形元素内且type、from、to需严格匹配类型语义。
animateTransform 是什么，浏览器到底认不认
animateTransform 是 SVG 原生动画元素，不是拼写错误的 animatetransform 或小写的 animatetransform。它被正式定义在 SVG 1.1 规范中，Chrome、Edge、Safari 当前均支持；Firefox 自 2020 年起也已修复兼容性问题（旧版可能静默失败）。但注意：animateTransform 必须嵌套在目标图形内（如 根下——否则直接被忽略，控制台也不会报错。
type、from、to 怎么配才不白写
这三个属性必须严格匹配类型语义，常见错误是格式错位或值类型混用：
-
type="rotate"：from和to必须是角度值，可带中心坐标，例如from="0 50 50"表示“绕 (50,50) 从 0° 开始”，to="360 50 50"才能完整旋转一圈；只写from="0"会默认绕左上角 (0,0)，常导致“飞出去” -
type="scale"：接受单数值（等比缩放）或两个数值（"2 0.5"表示 x 方向放大 2 倍、y 缩小一半）；不能写成"scale(2)"或"2x" -
type="translate"：值为"dx dy"形式，如from="0 0"→to="100 50"；单位是像素，不支持em或% - 绝对不要在同一个
animateTransform里混 type，比如from="0 50 50; 1"想同时旋转+缩放——浏览器只解析第一个分号前的部分，后面全丢弃
想同时旋转+缩放，为什么动画只动了一个
SVG 不允许单个 animateTransform 控制多种变换类型，但可以叠加多个——关键在 additive="sum" 和作用目标一致：
- 两个
animateTransform都要设attributeName="transform" - 一个设
type="rotate"，另一个设type="scale" - 两者都加
additive="sum"，否则后一个会完全覆盖前一个的 transform 效果 - 如果目标元素本身已有
transform属性（如
示例片段：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
<rect x="40" y="40" width="20" height="20" fill="blue"><animatetransform attributename="transform" type="rotate" from="0 50 50" to="360 50 50" dur="2s" repeatcount="indefinite" additive="sum"></animatetransform><animatetransform attributename="transform" type="scale" from="1" to="1.5" dur="2s" repeatcount="indefinite" additive="sum"></animatetransform></rect>
绕自身中心旋转/缩放，为什么总偏了
SVG 中所有 rotate 和 scale 的默认中心是元素坐标系原点，即左上角（x, y 所在点），不是几何中心。所以矩形
- 最稳妥做法：用
from="0"就自然绕中心转 - 偷懒写法：硬算中心坐标，填进
from和to，如from="0 70 70"——但一旦宽高或位置变，这里就得同步改，容易漏 - 别依赖 CSS 的
transform-origin：SVG 内联动画不响应这个 CSS 属性
真正麻烦的是组合动画 + 响应式尺寸：viewBox 缩放后，像素坐标意义已变，此时写死 "50 50" 可能完全错位。这种场景建议直接切到 CSS 动画或用 + JS 动态计算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
