How do I run multiple animateTransform animations?

I want to run two animations with begin="click".

Both animations should start working, just like in real life, the car has gone and the wheels are spinning..

But I only have one animation running..

I can't figure out how to run two animations in smil at the same time, help me figure out smil...

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 220">
<g id="car">
  <g style="fill:#C7CFE2">
    <rect width="57" height="18" x="7" y="181" transform="rotate(-129 -2 112)"/>
    <path d="M207 58c-6-1-9-8-6-13l6-11c5-8 14-13 23-13h44c8 0 16 4 21 10l31 42-119-15Z"/>
    <path d="m324 15-2-2h-39l61 69 36-17s-42-39-56-50Z"/>
  </g>
  
  <path style="fill:#FF6464" d="M415 56h-36c-5 0-11 2-15 4l-12 9-5 2-33-44c-2-2 0-6 3-6h14l-7-6c-7-6-20-12-50-12h-44c-19 0-38 4-55 13l-62 31H35C21 47 9 59 9 74v79l62 18h432v-27c0-49-39-88-88-88Zm-208 2c-6-1-9-8-6-13l6-11c5-8 14-13 23-13h44c8 0 16 4 21 10l31 42-119-15Z"/>
  
  <path style="fill:#D2555A" d="M503 180H106c-5 0-9-4-9-9s4-9 9-9h397c5 0 9 4 9 9s-4 9-9 9Z"/>
  
 
  

<g id="wheel">
  <circle style="fill:#000" cx="415" cy="160" r="44"/>
  
  <circle cx="415" cy="160" r="36" fill="transparent" stroke="#222" stroke-width="20" stroke-dasharray="6 6" />
  
  <circle cx="415" cy="160" r="38" fill="#000" />
  
  <circle style="fill:#B8BFD4" cx="415" cy="160" r="18"/>

  </g>
  

  
  <g style="fill:#D2555A">
    <path d="m79 180-2-1-70-17c-5-2-8-6-7-11s6-8 11-6l71 17c4 1 7 6 6 11-1 4-5 7-9 7Z"/>
    <path d="m9 100 12 13c4 3 5 7 5 12v37l-17-9v-53Z"/>
    
    <path d="M294 144H141c-5 0-9-4-9-9 0-4 4-8 9-8h153c7 0 14-3 19-8l13-14c4-3 9-3 13 0 3 4 3 9 0 13l-13 13c-9 9-20 13-32 13Z"/>
  </g>
  
<use href="#wheel" x="-315" y="0"/>
  
  <path style="fill:#FF8B8B" d="m15 57 339 33c5 1 10 0 14-2 20-10 90-34 135 46-5-44-43-78-88-78h-36c-5 0-11 2-15 4l-12 9-5 2s-3 4-21 2l-71-9-142-17H35c-8 0-15 4-20 10Z"/>
  <path style="fill:#FF6464" d="M44 29H22c-8 0-15-4-17-12l-3-7C1 6 3 3 7 3h37c5 0 9 4 9 9v9c0 5-4 8-9 8Z"/>
  
    <animateTransform
      attributeName="transform"
      type="translate"
      to="630,0"
      begin="click"
      dur="8s"
      fill="freeze"/>
  
      <animateTransform
      attributeName="transform"
      href="wheel"
      type="rotate"
      to="0 0 360"
      begin="car.click"
      dur="8s"
      fill="freeze"
      repeatCount="indefinite"/>
  
</g>
</svg>

Solution

href needs a fragment identifier i.e. a # at the start
the to rotate is incorrect, the angle should be the first value
you've not specified the centre of rotation and to do that you also need a from value
browsers don't animate use copies of animation very well so you may find the rear wheel doesn't work in some browsers. You could redo rewrite that wheel not to be use clone of the other wheel if you wished to avoid that.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 220">
<g id="car">
  <g style="fill:#C7CFE2">
    <rect width="57" height="18" x="7" y="181" transform="rotate(-129 -2 112)"/>
    <path d="M207 58c-6-1-9-8-6-13l6-11c5-8 14-13 23-13h44c8 0 16 4 21 10l31 42-119-15Z"/>
    <path d="m324 15-2-2h-39l61 69 36-17s-42-39-56-50Z"/>
  </g>
  
  <path style="fill:#FF6464" d="M415 56h-36c-5 0-11 2-15 4l-12 9-5 2-33-44c-2-2 0-6 3-6h14l-7-6c-7-6-20-12-50-12h-44c-19 0-38 4-55 13l-62 31H35C21 47 9 59 9 74v79l62 18h432v-27c0-49-39-88-88-88Zm-208 2c-6-1-9-8-6-13l6-11c5-8 14-13 23-13h44c8 0 16 4 21 10l31 42-119-15Z"/>
  
  <path style="fill:#D2555A" d="M503 180H106c-5 0-9-4-9-9s4-9 9-9h397c5 0 9 4 9 9s-4 9-9 9Z"/>
  
 
  

<g id="wheel">
  <circle style="fill:#000" cx="415" cy="160" r="44"/>
  
  <circle cx="415" cy="160" r="36" fill="transparent" stroke="#222" stroke-width="20" stroke-dasharray="6 6" />
  
  <circle cx="415" cy="160" r="38" fill="#000" />
  
  <circle style="fill:#B8BFD4" cx="415" cy="160" r="18"/>

  </g>
  

  
  <g style="fill:#D2555A">
    <path d="m79 180-2-1-70-17c-5-2-8-6-7-11s6-8 11-6l71 17c4 1 7 6 6 11-1 4-5 7-9 7Z"/>
    <path d="m9 100 12 13c4 3 5 7 5 12v37l-17-9v-53Z"/>
    
    <path d="M294 144H141c-5 0-9-4-9-9 0-4 4-8 9-8h153c7 0 14-3 19-8l13-14c4-3 9-3 13 0 3 4 3 9 0 13l-13 13c-9 9-20 13-32 13Z"/>
  </g>
  
<use href="#wheel" x="-315" y="0"/>
  
  <path style="fill:#FF8B8B" d="m15 57 339 33c5 1 10 0 14-2 20-10 90-34 135 46-5-44-43-78-88-78h-36c-5 0-11 2-15 4l-12 9-5 2s-3 4-21 2l-71-9-142-17H35c-8 0-15 4-20 10Z"/>
  <path style="fill:#FF6464" d="M44 29H22c-8 0-15-4-17-12l-3-7C1 6 3 3 7 3h37c5 0 9 4 9 9v9c0 5-4 8-9 8Z"/>
  
    <animateTransform
      attributeName="transform"
      type="translate"
      to="630,0"
      begin="click"
      dur="8s"
      fill="freeze"/>
  
      <animateTransform
      attributeName="transform"
      href="#wheel"
      type="rotate"
      from="0 415 160"
      to="360 415 160"
      begin="car.click"
      dur="8s"
      fill="freeze"
      repeatCount="indefinite"/>
  
</g>
</svg>