SVG中<g>标签内<path>元素动画失效，求解决方法

你的动画无法运行有两个核心问题：

• <g>元素本身没有x属性，所以attributeName="x"是无效的，SVG不会识别这个属性动画。
• 你没有给动画时长dur指定单位（比如s代表秒），浏览器无法正确解析动画时长。

要让这个文档图形动起来，你需要动画<g>的transform属性（因为你的path已经通过translate定位），具体修改如下：

• 将attributeName改为transform，对应<g>的位移变换。
• 把from和to的值改成完整的translate()变换语句，保持Y轴位移不变，只修改X轴。
• 给dur加上单位（比如4s表示4秒）。

<svg width="1200" height="300">
  <g id="doc">
    <!--Doc-->
    <path d="M 100 100 L 150 100 L 170 120 L 170 190 L 100 190 L 100 100 Z M 150 100 L 150 120              
        L 170 120 M 120 140 L 150 140  M 120 160 L 150 160" 
          stroke="black" stroke-width="8px" fill="white" transform="translate(350, 110)">
    </path>
  </g>

  <animate href="#doc" attributeName="transform" 
           from="translate(350, 110)" to="translate(1000, 110)" 
           dur="4s" repeatCount="indefinite" />
</svg>

• 如果你的SVG版本较低，href可以换成xlink:href（需要在根<svg>标签里添加xmlns:xlink="http://www.w3.org/1999/xlink"）。
• 如果你想让动画从X轴450的位置开始移动，只需把from的值改成translate(450,110)即可。

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