如何仅使用SVG animation标签实现指定元素绕自身轴旋转动画

核心修改逻辑 #

• SVG的rotate变换完整语法为rotate(角度, 旋转中心X, 旋转中心Y)，你之前只传了角度参数，默认绕SVG画布左上角旋转，所以会出现跑位的问题，需要传入旗帜对应旗杆的坐标作为旋转中心。
• 要实现往复摆动不要整圈旋转，用values属性定义角度摆动区间，加上additive="sum"参数保证动画效果叠加在元素原有定位变换上，不会覆盖XD导出的原始位置。
• 两面旗帜设置略微不同的动画时长，摆动效果更自然。

完整可运行代码 #

<svg xmlns="http://www.w3.org/2000/svg" width="864" height="864" viewBox="0 0 864 864">
  <g id="Grupo_76" data-name="Grupo 76" transform="translate(-682 -189)">
    <g id="right-flag" transform="translate(-283.11 -185.563) rotate(11)">
      <!-- 右侧旗帜摆动动画 -->
      <animateTransform
        attributeName="transform"
        type="rotate"
        values="-5 1522 262;5 1522 262;-5 1522 262"
        dur="3s"
        repeatCount="indefinite"
        additive="sum"
      />
      <path id="Trazado_128" data-name="Trazado 128" d="M5074,508.573v427.9" transform="translate(-3544.956 -60.656)"
        fill="none" stroke="#cab9a9" stroke-width="8" />
      <g id="Grupo_53" data-name="Grupo 53" transform="translate(1522 262)">
        <rect id="Rectángulo_1" data-name="Rectángulo 1" width="319.344" height="196.249" transform="translate(0 0)"
          fill="#999" />
        <rect id="Rectángulo_2" data-name="Rectángulo 2" width="319.344" height="196.249" transform="translate(0 0)"
          fill="rgba(92,92,92,0.77)" />
      </g>
    </g>
    <g id="left-flag" transform="matrix(0.978, -0.208, 0.208, 0.978, -779.086, 487.436)">
      <!-- 左侧旗帜摆动动画 -->
      <animateTransform
        attributeName="transform"
        type="rotate"
        values="5 1522 262;-5 1522 262;5 1522 262"
        dur="3.2s"
        repeatCount="indefinite"
        additive="sum"
      />
      <path id="Trazado_128-2" data-name="Trazado 128" d="M5074,508.573V936.468"
        transform="translate(-3239.704 -60.658)" fill="none" stroke="#cab9a9" stroke-width="8" />
      <g id="Grupo_53-2" data-name="Grupo 53" transform="translate(1522 262)">
        <rect id="Rectángulo_1-2" data-name="Rectángulo 1" width="312.46" height="192.018" transform="translate(0 0)"
          fill="rgba(208,191,184,0.35)" />
        <rect id="Rectángulo_2-2" data-name="Rectángulo 2" width="312.46" height="192.018" transform="translate(0 0)"
          fill="rgba(53,53,53,0.77)" />
      </g>
    </g>
    <circle id="Elipse_1" data-name="Elipse 1" cx="432" cy="432" r="432" transform="translate(682 189)"
      fill="rgba(208,191,184,0.35)" opacity="0.83" />
  </g>
</svg>

参数调整说明 #

• 摆动幅度：修改values里的角度数值，比如把-5改成-8、5改成8就会增大摆动幅度
• 摆动速度：修改dur属性的数值，单位为秒，数值越大摆动越慢
• 旋转中心：如果需要调整旋转的轴点，修改rotate后面两个坐标参数即可，坐标为当前旗帜组内的局部坐标

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