求助：如何在不使用外部CSS的情况下实现SVG双图形环绕动画

嘿，我来帮你搞定这个需求！你想要两个图形围绕着SVG里的大椭圆轨道做循环动画，而且完全用SVG原生实现不用外部CSS对吧？看你已经有了一个红色椭圆的旋转动画，我们可以基于这个改造，用SVG的<animateMotion>（最适合路径运动的原生元素）来实现更直观的轨道动画。

修改后的完整代码 #

<svg xmlns="http://www.w3.org/2000/svg" width="542" height="542" viewBox="0 0 542 542">
  <g id="svg" transform="translate(-655 -265)">
    <!-- 轨道椭圆：添加ID方便动画引用，顺便加个浅灰色边框方便看轨道 -->
    <circle id="orbit" cx="271" cy="271" r="271" transform="translate(655 265)" fill="none" stroke="#ccc" stroke-width="1"/>
    
    <!-- 你原有的路径元素保留不变 -->
    <path id="Path_1" data-name="Path 1" d="M818.25,412.875l.71.931c116.417,110.219-.023,204.664-.382,205.428-.045.089-.2.312-.375.672-2.758,5.713,3.239,3.015,3.594,2.858,147.217-64.969,210.869-212.39,210.672-213.249-.359-1.7-3.069-1.088-3.344-.781-4.366,4.893-81.574,88.727-207.317.617-.169-.118.317.2-.673-.473s-2.369-1.12-3.148-.181-.909,2.256.388,4.35" fill="none" stroke="#707070" stroke-width="1"/>
    <path id="Path_2" data-name="Path 2" d="M927.651,569.319s69.788,5.194,99.3,51.994c.017.04,4.351,6.826,5.406-.172a1.6,1.6,0,0,0,.069-.516,5.747,5.747,0,0,0-.21-2.031c-3.036-7.836-31.037-76.552-54.932-98.845-.009-.009-35.627,38.007-49.635,49.57" fill="none" stroke="#707070" stroke-width="1"/>
    
    <!-- 第一个图形：红色椭圆，沿轨道循环 -->
    <g id="shape-1">
      <circle cx="34.5" cy="34.5" r="34.5" fill="#f90a2a" stroke="#000" stroke-width="1"/>
      <animateMotion
        dur="10s"          <!-- 一圈的时长 -->
        repeatCount="indefinite" <!-- 无限循环 -->
        rotate="auto"      <!-- 让图形始终朝向运动方向（可选，去掉则图形保持固定朝向） -->
      >
        <mpath href="#orbit"/> <!-- 指定运动路径为轨道椭圆 -->
      </animateMotion>
    </g>
    
    <!-- 第二个图形：蓝色圆形，沿轨道循环，和第一个保持半圈距离 -->
    <g id="shape-2">
      <circle cx="34.5" cy="34.5" r="34.5" fill="#0a8cf9" stroke="#000" stroke-width="1"/>
      <animateMotion
        dur="10s"
        repeatCount="indefinite"
        rotate="auto"
        begin="5s" <!-- 延迟5秒启动，刚好和第一个图形相差半圈 -->
      >
        <mpath href="#orbit"/>
      </animateMotion>
    </g>
  </g>
</svg>

关键细节解释 #

1. <animateMotion> 元素：这是SVG原生的路径动画工具，专门用来让元素沿着指定路径运动，完全不需要外部CSS支持。
2. 轨道引用：通过<mpath href="#orbit">把动画绑定到我们的大椭圆轨道上，这样图形会自动沿着椭圆的轮廓运动。
3. 同步控制：第二个图形的begin="5s"设置让它比第一个晚启动5秒（刚好是一圈时长的一半），这样两个图形会始终保持半圈的间距，同时循环。
4. 旋转控制：rotate="auto"会让图形在运动时自动朝向路径的切线方向，如果你希望图形保持固定方向，把这个属性删掉或者设为rotate="0"就行。

另一种实现方式（用animateTransform绕中心旋转） #

如果你更倾向于用你原来的animateTransform方式，也可以通过设置旋转中心点来实现：

<g id="shape-1" transform="translate(655 496)">
  <circle cx="34.5" cy="34.5" r="34.5" fill="#f90a2a" stroke="#000" stroke-width="1"/>
  <animateTransform
    attributeName="transform"
    type="rotate"
    from="0 271 271" <!-- 旋转中心点是大椭圆的中心（相对于translate后的坐标系） -->
    to="360 271 271"
    dur="10s"
    repeatCount="indefinite"
  />
</g>

这种方式是让图形围绕大椭圆的中心点做圆周运动，适合规则的圆形/椭圆轨道，缺点是如果轨道是复杂路径就没法用了。

这样你就可以得到两个图形围绕轨道循环的动画啦，完全用SVG原生代码实现，不需要任何外部CSS！

内容的提问来源于stack exchange，提问作者Ghayas Ud Din