SVG animateTransform不支持translate百分比，如何实现响应式进度条动画？

问题背景 #

已实现一个SVG进度条无限循环动画（左到右填充后原路缩回），但当前SVG宽度和变换值均为固定像素值。尝试用百分比作为animateTransform的translate参数时发现无效，因为animateTransform不支持百分比单位。需要让SVG宽度设为100%（如占满flexbox容器）时，动画仍能正常运行。

原始代码 #

<svg width="500px" height="5px" style="background: #f5f5f5">
    <rect x="0" y="0" width="100%" height="100%" style="fill: black;" >
        <animateTransform id="fill" attributeName="transform" type="translate" from="-500 1" to="0 1" begin="0s;retract.end" dur="1s" calcMode="spline" keyTimes="0;1" keySplines=".5 0 .5 1" />
        <animateTransform id="retract" attributeName="transform" type="translate" from="0 1" to="500 1" begin="fill.end" dur="1s" calcMode="spline" keyTimes="0;1" keySplines=".5 0 .5 1"/>
    </rect>        
</svg>

解决方案：改用animate控制x属性（支持百分比） #

由于animateTransform不支持百分比单位，我们可以换用animate标签直接控制矩形的x属性，该属性支持百分比，能自适应SVG的实际宽度。

修改后的代码：

<svg width="100%" height="5px" style="background: #f5f5f5" viewBox="0 0 100 1" preserveAspectRatio="none">
  <rect x="0" y="0" width="100%" height="100%" fill="black">
    <!-- 填充动画：从容器左侧外移动到可视区域 -->
    <animate id="fill" 
             attributeName="x" 
             from="-100%" to="0%" 
             begin="0s;retract.end" 
             dur="1s" 
             calcMode="spline" 
             keyTimes="0;1" 
             keySplines=".5 0 .5 1" />
    <!-- 缩回动画：从可视区域移动到容器右侧外 -->
    <animate id="retract" 
             attributeName="x" 
             from="0%" to="100%" 
             begin="fill.end" 
             dur="1s" 
             calcMode="spline" 
             keyTimes="0;1" 
             keySplines=".5 0 .5 1" />
  </rect>
</svg>

关键说明 #

• 设置width="100%"让SVG占满父容器宽度，配合viewBox="0 0 100 1"和preserveAspectRatio="none"确保SVG自适应时不会变形。
• 用animate控制x属性的百分比偏移，替代固定像素的translate变换，动画会自动适配SVG的实际宽度。
• 保留原有的循环逻辑：fill动画在retract动画结束后自动启动，实现无限循环效果。

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