正确可用的是<animateTransform>，它是SVG原生动画元素，专用于对transform属性做插值动画；必须嵌套在图形内部，attributeName设为"transform"，type限于rotate/scale/translate/skewX/skewY，多变换需叠加多个并设additive="sum"。

不是标准 SVG 元素，浏览器不识别，写进去不会生效，控制台通常也不报错，只是静默忽略。你查不到它的 MDN 文档，SVG 1.1 或 SVG 2 规范里也不存在它。

真正可用的是 <animateTransform>（注意首字母 T 大写），它是 SVG 原生动画元素，专用于对 transform 属性做插值动画。

---

的基本用法

• 必须嵌套在目标图形内部（如 <rect>、<circle>、<g>），不能独立放在 <svg> 根下
• attributeName 必须设为 "transform"
• type 取值只能是："rotate"、"scale"、"translate"、"skewX" 或 "skewY"
• from 和 to 的格式必须严格匹配 type 类型，否则无效

例如旋转动画：

<rect x="50" y="50" width="40" height="40" fill="#3498db">
  <animateTransform 
    attributeName="transform"
    type="rotate"
    from="0 70 70"
    to="360 70 70"
    dur="2s"
    repeatCount="indefinite" />
</rect>

这里 from="0 70 70" 表示“绕坐标 (70,70) 从 0° 开始”，不是只写 "0"（那会默认绕左上角 (0,0)，容易移出视野）。

---

如何同时实现平移 + 旋转 + 缩放

SVG 不允许单个 <animateTransform> 混合多种类型（比如 from="0 50 50; 2" 想同时转+缩——浏览器只取分号前，后面丢弃）。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

正确做法是：叠加多个 <animateTransform>，都作用于 transform，并启用 additive="sum"

• 每个 <animateTransform> 各管一种变换
• 都设 attributeName="transform"
• 都加 additive="sum"（否则后一个会完全覆盖前一个的 transform 效果）
• 它们按书写顺序叠加，效果可预测

示例（绕中心旋转 + 等比放大 + 向右平移）：

<g transform="translate(100,100)">
  <circle cx="0" cy="0" r="20" fill="#e74c3c">
    <!-- 旋转：绕自身中心（即 g 的原点） -->
    <animateTransform 
      attributeName="transform"
      type="rotate"
      from="0"
      to="360"
      dur="3s"
      repeatCount="indefinite"
      additive="sum" />
    <!-- 缩放 -->
    <animateTransform 
      attributeName="transform"
      type="scale"
      from="1"
      to="1.8"
      dur="3s"
      repeatCount="indefinite"
      additive="sum" />
    <!-- 平移（注意：是相对当前坐标系的偏移） -->
    <animateTransform 
      attributeName="transform"
      type="translate"
      from="0 0"
      to="40 0"
      dur="3s"
      repeatCount="indefinite"
      additive="sum" />
  </circle>
</g>

⚠️ 注意：如果 <g> 上已有 transform="translate(100,100)"，它会和动画叠加，最终位置 = 初始位移 + 动画平移 + 动画旋转缩放中心偏移。建议提前规划坐标系。

---

常见错误与避坑提示

• 拼写错误：写成 <animatetransform>、<animateTransform> 小写、或 animatetransform 全小写 → 全部无效
• type 写错：比如 "rotation"、"scaleX"、"transform" → 浏览器不认，静默失败
• from/to 格式错：
  • type="rotate" 却写 from="0deg" → 应为 "0" 或 "0 50 50"（不带单位）
  • type="scale" 却写 from="scale(2)" → 应为 "2" 或 "2 0.5"
  • type="translate" 却写 from="100px 50px" → 应为 "100 50"（单位隐含为用户坐标）
• 忘记 additive="sum" → 多个动画只会保留最后一个，前面的被覆盖
• 把 <animateTransform> 写在 <svg> 下而非图形内部 → 完全不执行，无提示

---

不复杂但容易忽略。关键就三点：拼写对、嵌套对、叠加时加 additive="sum"。