SVG：垂直旋转动画

Question

我是SVG和实验的新手。 我做了一个带有旋转圆圈和另一个垂直圆圈的动画。现在我试图将这些动画组合成一个圆圈，使其垂直并同时旋转。我无法弄清楚如何做到这一点。到目前为止，我的代码如下所示。动画分开工作但不在一起。有什么提示吗？

<svg width="200px" height="300px">
<circle cx="50" cy="200" r="20" width="100" height="40"
    style="stroke: #ff00ff; fill:none; stroke-dasharray:10, 5; stroke-width:2;" >

  <animateTransform attributeName="transform"
                    type="rotate"
                    values="360 50 200; 0 50 200; 360 50 200"
                    begin="0s" dur="5s"
                    repeatCount="indefinite" />

  <animate attributeName="cy" 
         begin="0s" dur="2" 
         values="20;250;20"
         repeatCount="indefinite" />
</circle>
</svg>