SVG SMIL动画：如何设置#tran路径transform origin匹配#drop动画

• 核心问题：SVG的animateTransform不支持transform-origin属性，必须通过嵌套translate变换模拟自定义变换中心，才能匹配#drop的路径变形效果。
• #drop的动画本质：将水滴绕自身底部点（初始路径的(50,4)）垂直翻转，再向下微调位置，最终还原初始状态。
• 针对#tran的解决方案：#tran需要保持translate(4,0)的偏移，因此基于它的局部坐标系（路径自身的(50,4)为底部点）构建变换序列：
  1. 先应用基础偏移translate(4,0)
  2. 执行绕局部底部点的垂直翻转：translate(50,4) scale(1,-1) translate(-50,-4)
  3. 加上向下平移的微调：translate(0,2)
• 合并成单个animateTransform动画，避免多动画的顺序冲突，代码更简洁。

修改后的完整代码：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs>
    <path id="drop">
      <animate attributeName="d" begin="0s" dur="3s" values="M 50 0 Q 48 4 50 4 Q 52 4 50 0 Z; M 50 10 Q 48 6 50 6 Q 52 6 50 10 Z; M 50 0 Q 48 4 50 4 Q 52 4 50 0 Z;" repeatCount="indefinite"/>
    </path>
    <!-- 移除defs中#tran的transform，放到use的动画里统一管理 -->
    <path id="tran" d="M 50 0 Q 48 4 50 4 Q 52 4 50 0 Z"/>
  </defs> 
  <use href="#drop"/><!-- 原动画保持不变 -->
  <use href="#tran">
    <animateTransform
      attributeName="transform"
      attributeType="XML"
      type="transform"
      <!-- 初始状态：仅偏移4单位；中间状态：偏移+翻转+下移；还原初始 -->
      values="translate(4,0); translate(4,0) translate(50,4) scale(1,-1) translate(-50,-4) translate(0,2); translate(4,0)"
      dur="3s"
      repeatCount="indefinite"
    />
  </use>
</svg>

补充说明 #

• 该方案完全基于SVG原生动画，无需CSS或JavaScript，符合曼陀罗动画的简洁需求。
• 变换序列逻辑：translate(50,4)把局部底部点移到原点，scale(1,-1)完成垂直翻转，translate(-50,-4)将元素移回原位置，最后translate(0,2)让翻转后的水滴位置与#drop的中间状态完全匹配。

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