SVG动画应该很简单

Question

我有一个带动画的简单SVG绘图  我所拥有的是两个围绕共同中心旋转的物体，具有不同的旋转速率。我想绘制一条连接两个对象的线。

SVG图纸如下：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <circle cx="200" cy="150" r="5" fill="blue">
        <animateTransform
            attributeName="transform"
            begin="0s"
            dur="30s"
            type="rotate"
            from="90 150 150"
            to="-90 150 150"
            repeatCount="indefinite"
        />
    </circle>
    <circle cx="226.2" cy="150" r="5" fill="red">
        <animateTransform
            attributeName="transform"
            begin="0s"
            dur="30s"
            type="rotate"
            from="47.8 150 150"
            to="-47.8 150 150"
            repeatCount="indefinite"
        />
    </circle>
</svg>

在任何给定时间计算对象的位置都很容易，但SVG似乎并不容易这样做。我相信这可以通过几次旋转来完成，也可能是一次缩放，但我无法理解它是如何工作的。

那么，谁知道该怎么做？