<animatetransform>不是SVG标准元素，正确写法是<animateTransform>（T大写），用于对transform属性做旋转、缩放等插值动画，需嵌套在图形元素内并指定type、from、to等属性。

SVG 中没有 <animatetransform> 标签

直接说结论：<animatetransform> 不是 SVG 标准元素，浏览器不识别，写进去不会生效，控制台通常也不会报错，只是静默忽略。你查不到它的 MDN 文档，也不能在任何 SVG 1.1 或 SVG 2 规范里找到它。

正确实现旋转和缩放动画要用 <animateTransform>

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

• 必须嵌套在目标图形元素（如 <rect>、<circle>、<g>）内部，或作为其兄弟节点配合 targetElement（但更推荐嵌套）
• attributeName 必须设为 transform
• type 取值为 rotate、scale、translate 或 skewX/skewY，不能写成 "rotation" 或 "scaleX"
• from 和 to 的格式要匹配 type：比如 rotate 用角度值（可带中心坐标），scale 用单个数或两个数（"2" 或 "2 0.5"）

<svg width="200" height="200">
  <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"
    />
    <animateTransform
      attributeName="transform"
      type="scale"
      from="1"
      to="1.5"
      dur="2s"
      begin="0s"
      repeatCount="indefinite"
      additive="sum"
    />
  </rect>
</svg>

多个变换同时动画的坑：不能共用一个 <animateTransform>

SVG 动画不支持在一个 <animateTransform> 里混合 rotate 和 scale。浏览器只按 type 解析单一变换类型，强行写 from="0 70 70; 1" 会失败。

Json Schema Toolkit

使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。

下载

• 必须拆成多个 <animateTransform> 元素，都作用于 transform
• 用 additive="sum" 确保它们叠加（否则后一个会覆盖前一个）
• 注意坐标系：旋转/缩放的中心默认是元素左上角（0 0），要加偏移就得显式写 from="0 70 70" 这样的三元组
• 如果目标是让元素绕自身中心旋转+缩放，先用 <g transform="translate(70,70)"> 把原点移到中心，再动画，会更可控

现代项目建议优先用 CSS 动画替代 <animateTransform>

<animateTransform> 虽然是原生方案，但存在明显局限：

• 不支持 easing 函数（只有 linear、paced 等极简选项）
• 无法与 JS 交互控制（暂停/反转需用 beginElement() 等冷门方法）
• IE 以外的现代浏览器虽支持，但调试困难，动画状态不可见
• 缩放时若未设置 transform-origin，CSS 行为更直观

等效的 CSS 写法更灵活：

<svg width="200" height="200">
  <rect class="spin-zoom" x="50" y="50" width="40" height="40" fill="#3498db" />
</svg>

<style>
.spin-zoom {
  animation: rotateScale 2s infinite;
}
@keyframes rotateScale {
  from {
    transform: rotate(0deg) scale(1);
    transform-origin: 70px 70px;
  }
  to {
    transform: rotate(360deg) scale(1.5);
  }
}
</style>

真正需要坚持用 <animateTransform> 的场景只剩：纯静态 SVG 文件（无外链 CSS/JS）、需离线运行、且必须零依赖。