svg radialGradient and transform

<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <radialGradient
    id="gradient1"
    gradientUnits="userSpaceOnUse"
    cx="100"
    cy="100"
    r="100"
    fx="100"
    fy="100">
    <stop offset="0%" stop-color="red" />
    <stop offset="50%" stop-color="yellow" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>

  <radialGradient
    id="gradient2"
    gradientUnits="userSpaceOnUse"
    cx="310"
    cy="100"
    r="100"
    fx="310"
    fy="100"
    gradientTransform="skewX(20) translate(-35,0)" >

    <stop offset="0%" stop-color="red" />
    <stop offset="50%" stop-color="yellow" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>

  <rect x="0" y="0" width="200" height="200" fill="url(#gradient1)" />

  <rect
    x="210"
    y="0"
    rx="50"
    ry="50"
    width="200"
    height="200"
    fill="url(#gradient2)" 
 >
<animateTransform attributeName="transform" type="rotate" 
values="0 310 100;360 310 100" begin="0" dur="3s" repeatCount="indefinite"/>




</rect>
</svg>