views:

229

answers:

0

I have a simple SVG drawing with an animation. What I have is two objects moving in a circle around a common center, with different rotation rates. I want to draw a line connecting the two objects.

The SVG drawing is as follows:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
    <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>

It's easy enough to calculate the positions of the objects at any given time, but SVG doesn't seem to make it easy to do it this way. I'm convinced that this could be done with a couple of rotations and maybe a scaling, but I can't wrap my mind around how it would work.

So, anyone know what to do?