SVG柱状图高度动画故障：height属性无效，scale动画偏移求助

问题分析 #

你尝试实现柱状条从100%高度→30%高度→100%高度的循环动画，但遇到两个核心问题：

• 使用<animate>修改height属性完全无效：<path>元素本身没有height属性，无法通过这种方式改变形状。
• 使用<animateTransform>的scale动画导致柱状条下移出界：默认缩放变换的原点是元素左上角，y轴缩放时会向下拉伸，导致柱状条底部超出图表范围。

解决方案 #

方案一：修正Scale动画的变换原点 #

通过设置transform-origin为柱状条的底部中点，让缩放从底部向上进行，避免下移问题。同时调整缩放比例为0.3（对应30%高度），修正之前放大3倍的错误设置。

修改后的完整代码：

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1276.9 806.1">
  <defs>
    <style>
      .cls-1 {
        fill: #bcbcbc;
      }
    </style>
  </defs>
  <g>
    <g id="Ebene_1">
      <g id="diagramm_balken">
        <path id="achsen" class="cls-1" d="M944.6,722H313.4c-10.3,0-18.9-8.6-18.9-18.9V71.9c0-10.3,8.6-18.9,18.9-18.9s18.9,8.6,18.9,18.9v612.3h612.3c10.3,0,18.9,8.6,18.9,18.9s-8.6,18.9-18.9,18.9Z"/>
        <path class="cls-1" d="M389.1,422.6h52.4c12.8,0,23.2,10.3,23.2,22.9v233.5c0,12.7-10.4,22.9-23.2,22.9h-52.4c-12.8,0-23.2-10.3-23.2-22.9v-233.5c0-12.7,10.4-22.9,23.2-22.9Z">
          <animateTransform  
            attributeType="xml"
            attributeName="transform" 
            type="scale"
            values="1,1; 1,0.3; 1,1"
            transform-origin="50% 100%"
            begin="0.4s" 
            dur="4s" 
            repeatCount="indefinite" />
        </path>
        <path class="cls-1" d="M531.7,305.1h52.4c12.8,0,23.2,10.4,23.2,23.3v351.1c0,12.9-10.4,23.3-23.2,23.3h-52.4c-12.8,0-23.2-10.4-23.2-23.3v-351.1c0-12.9,10.4-23.3,23.2-23.3Z">
           <animateTransform  
            attributeType="xml"
            attributeName="transform" 
            type="scale"
            values="1,1; 1,0.3; 1,1"
            transform-origin="50% 100%"
            begin="0.4s" 
            dur="4s" 
            repeatCount="indefinite" />
        </path>
        <path class="cls-1" d="M674.4,226h52.4c12.8,0,23.2,10.2,23.2,22.9v432.7c0,12.6-10.4,22.9-23.2,22.9h-52.4c-12.8,0-23.2-10.2-23.2-22.9V248.9c0-12.6,10.4-22.9,23.2-22.9Z">
           <animateTransform  
            attributeType="xml"
            attributeName="transform" 
            type="scale"
            values="1,1; 1,0.3; 1,1"
            transform-origin="50% 100%"
            begin="0.4s" 
            dur="4s" 
            repeatCount="indefinite" />
        </path>
        <path class="cls-1" d="M816.5,127.9h52.4c12.8,0,23.2,10.3,23.2,23v529.9c0,12.7-10.4,23-23.2,23h-52.4c-12.8,0-23.2-10.3-23.2-23V150.9c0-12.7,10.4-23,23.2-23Z">
           <animateTransform  
            attributeType="xml"
            attributeName="transform" 
            type="scale"
            values="1,1; 1,0.3; 1,1"
            transform-origin="50% 100%"
            begin="4s" 
            dur="4s" 
            repeatCount="indefinite" />
        </path>
      </g>
    </g>
  </g>
</svg>

方案二：直接动画Path的d属性（精准控制） #

如果需要更精准的形状控制，可以直接动画<path>的d属性，手动计算30%高度对应的路径坐标，确保柱状条始终从底部向上收缩/恢复。

以第一个柱状条为例，原始高度为233.5，30%高度为233.5 * 0.3 ≈ 70.05，调整路径y坐标后的动画代码：

<path class="cls-1" d="M389.1,422.6h52.4c12.8,0,23.2,10.3,23.2,22.9v233.5c0,12.7-10.4,22.9-23.2,22.9h-52.4c-12.8,0-23.2-10.3-23.2-22.9v-233.5c0-12.7,10.4-22.9,23.2-22.9Z">
  <animate 
    attributeName="d" 
    dur="4s" 
    values="
      M389.1,422.6h52.4c12.8,0,23.2,10.3,23.2,22.9v233.5c0,12.7-10.4,22.9-23.2,22.9h-52.4c-12.8,0-23.2-10.3-23.2-22.9v-233.5c0-12.7,10.4-22.9,23.2-22.9Z;
      M389.1,686.1h52.4c12.8,0,23.2,10.3,23.2,22.9v70.05c0,12.7-10.4,22.9-23.2,22.9h-52.4c-12.8,0-23.2-10.3-23.2-22.9v-70.05c0-12.7,10.4-22.9,23.2-22.9Z;
      M389.1,422.6h52.4c12.8,0,23.2,10.3,23.2,22.9v233.5c0,12.7-10.4,22.9-23.2,22.9h-52.4c-12.8,0-23.2-10.3-23.2-22.9v-233.5c0-12.7,10.4-22.9,23.2-22.9Z"
    repeatCount="indefinite"/>
</path>

方案对比 #

• 方案一：实现简单，无需计算路径坐标，适合规则矩形柱状条；缺点是缩放可能导致边缘模糊（取决于渲染引擎）。
• 方案二：形状控制精准，无缩放模糊问题；缺点是需要手动计算不同高度对应的路径坐标，适合对动画精度要求高的场景。

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