SVG动画故障：根元素宽高、坐标参数变更无动画效果

• 出现这个问题和你写动画的语法没关系，核心是属性的适用场景不匹配：
  • 当<svg>直接内嵌在HTML文档中时，它是和<div>、<img>一样的标准CSS替换元素：SVG原生命名空间下的x/y属性对它没有任何布局效果，它的实际位置完全由CSS定位规则控制；同时width/height虽然XML属性和CSS属性同名，但CSS渲染层不会监听你直接修改XML属性的变化，自然触发不了过渡。
  • 当<svg>是独立SVG文档的根元素时，SVG规范本身就不支持对根元素设置x/y定位属性——这两个属性只有当<svg>是其他SVG的嵌套子元素时才会生效，浏览器遇到根元素上的x/y值会直接忽略。
  • 你之前给内部<circle>这类子元素做动画能正常生效，是因为这类子元素的几何属性本来就属于SVG渲染层的可动画属性，不存在上述的渲染层不匹配问题。

基础映射规则 #

不要直接对SVG根元素的XML原生属性做动画绑定，统一把要控制的四个参数映射到浏览器渲染层可识别的可动画属性上：

• 尺寸类（对应原width/height）：直接使用CSS的width/height属性，这是所有浏览器都支持的可触发过渡的属性，兼容性远好于直接操作XML属性。
• 位置类（对应原x/y）：如果需要脱离常规文档流定位，给元素加position: absolute，用left/top或者transform: translate(x值, y值)控制位置——后者的动画性能更好，不会触发页面全局重排。

HTML内嵌SVG的实现步骤 #

1. 先给SVG元素设置基础样式，把初始值和你原来写的XML属性值对齐，避免首次加载出现位置跳变：

   #Transporter_1 {
     position: absolute;
     /* 对齐原XML属性的初始值 */
     left: 124.23852130911843px;
     top: 88.06430110098822px;
     width: 10px;
     height: 10px;
     /* 核心：给四个目标属性绑定过渡规则 */
     transition: left 0.3s ease, top 0.3s ease, width 0.3s ease, height 0.3s ease;
   }
   

2. 绑定点击事件，触发对应的属性值修改即可自动播放过渡动画：

   document.getElementById('Transporter_1').addEventListener('click', (e) => {
     // 直接修改CSS属性，浏览器会自动应用预设的过渡规则
     e.target.style.left = '200px';
     e.target.style.top = '150px';
     e.target.style.width = '40px';
     e.target.style.height = '40px';
   })
   

注意：如果你的SVG是内嵌在HTML中的，不要尝试用SMIL的<animate>标签给根SVG的x/y属性做动画——这两个属性在HTML上下文里属于被浏览器忽略的无效属性，绑了动画也不会有任何渲染变化。

嵌套SVG场景的适配 #

如果你的<svg id="Transporter_1">不是HTML内嵌的，而是作为另一个SVG的子元素存在（这时候原生x/y属性是生效的），之前SMIL动画失效的原因大概率是你把<animate>标签写在了外层根SVG上，而不是这个嵌套子SVG上。正确的写法是把动画标签直接放在这个嵌套子SVG的内部：

<!-- 外层父SVG -->
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
  <!-- 嵌套的子SVG，原生x/y属性对它是有效的 -->
  <svg 
    x="124.23" 
    y="88.06" 
    width="10" 
    height="10" 
    id="Transporter_1" 
    data-name="Transporter 1" 
    viewBox="0 0 70 70"
  >
    <!-- 直接把子SVG的动画标签写在子元素内部，绑定点击触发 -->
    <animate attributeName="x" from="124.23" to="200" dur="0.3s" begin="click" fill="freeze" />
    <animate attributeName="y" from="88.06" to="150" dur="0.3s" begin="click" fill="freeze" />
    <animate attributeName="width" from="10" to="40" dur="0.3s" begin="click" fill="freeze" />
    <animate attributeName="height" from="10" to="40" dur="0.3s" begin="click" fill="freeze" />
    <!-- 原有的circle等内部子元素照常放置即可 -->
  </svg>
</svg>

内容的提问来源于stack exchange，提问作者Detoner