如何固定旋转中心点，以不同速度实现SVG路径动画？

要让不同SVG路径在指定时间点开始绕中心旋转，你可以用SVG原生动画或者CSS动画，以下是具体实现：

方案一：SVG原生<animateTransform>动画 #

直接在SVG的分组元素（<g>）内添加动画标签，通过begin属性控制延迟启动时间，无需额外CSS/JS：

<svg width="300" height="300" viewBox="0 0 300 300">
  <g id="first">
    <path id="path1" fill="#ed1c24" opacity="1.00" d=" M 7.01 7.01 C 104.67 6.99 202.33 6.99 299.99 7.01 C 300.01 104.67 300.01 202.33 299.99 299.99 C 202.33 300.00 104.67 300.01 7.01 299.99 C 7.00 202.33 6.99 104.67 7.01 7.01 M 33.01 32.01 C 32.99 113.67 32.99 195.33 33.01 276.99 C 114.00 277.01 195.00 277.01 275.99 276.99 C 276.01 195.33 276.00 113.67 275.99 32.01 C 195.00 31.99 114.00 31.99 33.01 32.01 Z" />
    <!-- path1 1秒后开始旋转，每2秒转一圈 -->
    <animateTransform
      attributeName="transform"
      type="rotate"
      from="0 153.5 153.5"
      to="360 153.5 153.5"
      begin="1s"
      dur="2s"
      repeatCount="indefinite"
    />
  </g>
  <g id="second">
    <path id="path2" fill="#000000" opacity="1.00" d=" M 153.11 60.95 C 153.80 60.95 155.19 60.95 155.89 60.95 C 164.16 84.01 170.90 107.63 178.27 131.00 C 193.87 131.15 209.34 132.65 225.03 131.99 C 231.77 133.78 238.79 132.61 245.68 133.11 C 247.47 134.01 247.60 136.84 245.75 137.75 C 228.10 151.08 210.95 165.34 193.10 178.24 C 200.20 200.70 205.97 223.63 212.89 246.17 C 213.90 248.26 211.70 251.09 209.51 249.75 C 191.40 237.05 173.47 224.11 155.49 211.23 C 154.51 210.75 153.61 210.91 152.79 211.69 C 135.34 224.34 117.79 236.83 100.20 249.29 C 98.13 251.48 94.85 248.71 96.11 246.17 C 103.03 223.63 108.79 200.70 115.90 178.24 C 98.05 165.34 80.90 151.08 63.25 137.75 C 61.40 136.84 61.52 134.01 63.32 133.12 C 70.21 132.61 77.23 133.78 83.97 131.99 C 99.66 132.65 115.13 131.15 130.73 131.00 C 138.19 107.66 144.91 84.03 153.11 60.95 Z" />
    <!-- path2 3秒后开始旋转，每2秒转一圈 -->
    <animateTransform
      attributeName="transform"
      type="rotate"
      from="0 153.5 153.5"
      to="360 153.5 153.5"
      begin="3s"
      dur="2s"
      repeatCount="indefinite"
    />
  </g>
</svg>

关键属性说明： #

• type="rotate"：指定动画类型为旋转
• from/to：格式为[角度] [旋转中心X] [旋转中心Y]，这里取SVG画布中心(153.5,153.5)
• begin：设置动画启动延迟时间
• dur：单次旋转的时长
• repeatCount="indefinite"：让动画无限循环

方案二：CSS动画 #

通过CSS定义旋转动画，利用animation-delay控制启动时间，适合需要和页面其他CSS样式联动的场景：

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 定义旋转动画 */
    @keyframes rotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    /* 给path1所在分组设置动画：1秒延迟，2秒一圈，无限循环 */
    #first {
      transform-origin: 153.5px 153.5px; /* 设置旋转中心 */
      animation: rotate 2s linear 1s infinite;
    }

    /* 给path2所在分组设置动画：3秒延迟，2秒一圈，无限循环 */
    #second {
      transform-origin: 153.5px 153.5px;
      animation: rotate 2s linear 3s infinite;
    }
  </style>
</head>
<body>
  <svg width="300" height="300" viewBox="0 0 300 300">
    <g id="first">
      <path id="path1" fill="#ed1c24" opacity="1.00" d=" M 7.01 7.01 C 104.67 6.99 202.33 6.99 299.99 7.01 C 300.01 104.67 300.01 202.33 299.99 299.99 C 202.33 300.00 104.67 300.01 7.01 299.99 C 7.00 202.33 6.99 104.67 7.01 7.01 M 33.01 32.01 C 32.99 113.67 32.99 195.33 33.01 276.99 C 114.00 277.01 195.00 277.01 275.99 276.99 C 276.01 195.33 276.00 113.67 275.99 32.01 C 195.00 31.99 114.00 31.99 33.01 32.01 Z" />
    </g>
    <g id="second">
      <path id="path2" fill="#000000" opacity="1.00" d=" M 153.11 60.95 C 153.80 60.95 155.19 60.95 155.89 60.95 C 164.16 84.01 170.90 107.63 178.27 131.00 C 193.87 131.15 209.34 132.65 225.03 131.99 C 231.77 133.78 238.79 132.61 245.68 133.11 C 247.47 134.01 247.60 136.84 245.75 137.75 C 228.10 151.08 210.95 165.34 193.10 178.24 C 200.20 200.70 205.97 223.63 212.89 246.17 C 213.90 248.26 211.70 251.09 209.51 249.75 C 191.40 237.05 173.47 224.11 155.49 211.23 C 154.51 210.75 153.61 210.91 152.79 211.69 C 135.34 224.34 117.79 236.83 100.20 249.29 C 98.13 251.48 94.85 248.71 96.11 246.17 C 103.03 223.63 108.79 200.70 115.90 178.24 C 98.05 165.34 80.90 151.08 63.25 137.75 C 61.40 136.84 61.52 134.01 63.32 133.12 C 70.21 132.61 77.23 133.78 83.97 131.99 C 99.66 132.65 115.13 131.15 130.73 131.00 C 138.19 107.66 144.91 84.03 153.11 60.95 Z" />
    </g>
  </svg>
</body>
</html>

关键属性说明： #

• transform-origin：必须设置为SVG的旋转中心坐标，否则元素会绕左上角旋转
• animation：简写属性格式为[动画名称] [时长] [速度曲线] [延迟时间] [循环次数]
• linear：设置旋转速度均匀，避免动画快慢变化

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