animatetransform必须嵌套在图形元素内部才生效，不能直接放在根标签下；绕自身中心旋转需手动计算绝对坐标并填入from/to；多变换叠加须用additive="sum"并列多个动画；旋转裁剪问题应通过css transform和overflow:visible解决。
SVG animateTransform 必须嵌套在图形内部
直接把 animateTransform 写在 <svg></svg> 根标签下，浏览器会静默忽略——它只对父级是图形元素（如 <rect></rect>、<circle></circle>、<g></g>）时才生效。常见错误是把它当成独立动画节点，结果动画完全不触发。
正确写法必须是：
<rect x="50" y="50" width="40" height="40" fill="red"><animatetransform attributename="transform" type="rotate" from="0 70 70" to="360 70 70" dur="2s" repeatcount="indefinite"></animatetransform></rect>
-
from和to中的70 70是旋转中心，对应矩形中心（x + width/2 = 50 + 20,y + height/2 = 50 + 20） - 若省略中心坐标，如
from="0"，默认绕(0, 0)旋转，图形大概率飞出视区 - Firefox 2020+ 支持该语法，旧版需降级用 JS 或 CSS 替代
绕自身中心旋转必须显式计算 cx/cy
SVG 的 rotate(angle cx cy) 不会自动识别“图形中心”，所有 cx/cy 都是绝对坐标，需手动算出并填入。不同图形计算方式不同：
-
<rect x="10" y="20" width="60" height="40"></rect>→ 中心为(10 + 60/2, 20 + 40/2) = (40, 40) -
<circle cx="80" cy="60" r="25"></circle>→ 中心就是80, 60 -
<path d="M0,0 L100,0 L100,50 Z"></path>→ 调用getBBox()获取包围盒，再算box.x + box.width/2和box.y + box.height/2
动态场景建议用 JS 计算后注入：el.setAttribute('transform', `rotate(45 ${cx} ${cy})`)，避免硬编码出错。
多个变换叠加要用 additive="sum"
想让一个图形同时旋转 + 缩放，不能在一个 animateTransform 里写 from="0 50 50; 1"——分号后的内容会被浏览器丢弃。正确做法是并列两个动画，且都声明 additive="sum"：
<g transform="scale(0.8)"><animatetransform attributename="transform" type="rotate" from="0 50 50" to="360 50 50" dur="3s" additive="sum"></animatetransform><animatetransform attributename="transform" type="scale" from="1" to="1.2" dur="1.5s" additive="sum"></animatetransform></g>
- 两者都作用于
transform属性，additive="sum"表示叠加而非覆盖 - 若目标元素已有初始
transform（比如<g transform="scale(0.8)"></g>），动画值会与之相加，需提前预判最终效果 - 不加
additive="sum"会导致后一个动画完全抹掉前一个的变换
旋转动画被裁剪？问题不在 SVG 而在容器
SVG 图形旋转时边缘消失，通常不是动画失效，而是 <svg></svg> 父容器默认 overflow: hidden，且 viewBox 尺寸未预留旋转所需空间。矩形旋转 45° 后外接矩形宽度会扩大至原始尺寸的 √2 倍，超出部分直接被裁。
解法是跳出 SVG 内部坐标系，改用 CSS 控制整个 <svg></svg> 元素：
- 父容器设
overflow: visible -
<svg></svg>用position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)居中 - 动画绑定在
transform上，transform-origin: 50% 50%确保绕自身中心转
这种方案规避了 SVG 内部 rotate() 对 bounding box 的依赖，也省去手动算中心坐标的麻烦——但仅适用于整图旋转，无法控制单个 <path></path> 独立动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
