Rotate around rotating object

Question

I want to create svg animation of solar system. I've managed to code most things, but I am stuck on moon rotating over Earth. Any Ideas how to make it working?

<svg viewBox="0 0 500 500">
    <!-- sun -->
    <circle cx="250" cy="250" r="30" style="stroke: none; fill:
    #fffb00;"></circle>
    
    <!-- earth -->
    <circle cx="170" cy="170" r="12" style="stroke: none; fill:
    #040e9e;">
        <animateTransform attributeName="transform" type="rotate" from="0
        250 250" to="360 250 250" `scale(1 1)` begin="0s" dur="7s" repeatCount="indefinite" />
    </circle>
    
    <!-- moon -->
    <circle cx="157" cy="157" r="3" style="stroke: none; fill:
    #040e9e;">
        <animateTransform attributeName="transform" type="rotate" from="0
        170 170" to="360 250 250" begin="0s" dur="10s" repeatCount="indefinite" />
    </circle>
</svg>

https://jsfiddle.net/txuovbgr/

Answer 1

You put both the earth and the moon in a group and you animateTransform the group and the moon

<svg viewBox="0 0 500 500">
  <!-- sun -->
  <circle cx="250" cy="250" r="30" style="stroke: none; fill:
    #fffb00;"></circle>

 
  <g>
     <!-- earth -->
    <circle cx="170" cy="170" r="12" style="stroke: none; fill:
    #040e9e;">
    </circle>

    <!-- moon -->
    <circle cx="157" cy="157" r="3" style="stroke: none; fill:
    red">
      <animateTransform attributeName="transform" type="rotate" from="0 170 170" to="360 170 170" begin="0s" dur="10s" repeatCount="indefinite" />
    </circle>

    <animateTransform attributeName="transform" type="rotate" from="0 250 250" to="360 250 250" scale(1 1) begin="0s" dur="7s" repeatCount="indefinite" />
  </g>

</svg>