Animation SVG：垂直旋转动画

我不熟悉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>

这是一个现场演示，带有一个固定的可视框，以便可以看到整个动画：您的演示在OS X上的Safari v7.0.1上似乎对我有用。您使用的浏览器/UA是什么？什么操作系统？什么版本？我可以建议制作一个更简单、更容易理解的动画吗？@Phrogz我正在使用win7，我已经在chrome31.0、opera12.16、ff26.0上试用过了。它们看起来都一样。结合动画，圆圈会在整个位置旋转和跳跃，而不是垂直。您的意图仍然不清楚。让我猜猜：你想让圆在上下滑动的同时围绕其中心旋转吗？就像汽车在上下移动时车轮旋转一样？@Phrogz如果我不清楚的话，我很抱歉。是的，这就是我想要实现的。如果单独逐个测试动画，将看到圆旋转或垂直上下移动。所以我试着把它们结合起来，使圆在垂直方向上绕着中心旋转。只是把这两个动画都包含在圆圈中并没有像我预期的那样起作用。是否有可能实现我的代码所采用的方式？