Rotate circle around another rotating circle

Question

I have a circle in svg rotating around a given point. I added another circle. I want to rotate the second circle around the first rotating circle. How can I achieve this? Until now I am able to rotate the first circle around a point. And the second circle is rotating but not around the first rotating one. I am sharing my code :

firstCircle= document.createElementNS(namespace, "circle");
firstCircle.setAttributeNS(null, "id", "firstCircle");
firstCircle.setAttributeNS(null, "cx", 700);
firstCircle.setAttributeNS(null, "cy", 400);
firstCircle.setAttributeNS(null, "r", 30);
firstCircle.setAttributeNS(null, "fill", "#0077BE");
svg.appendChild(firstCircle);

firstCircleAnimate = document.createElementNS(namespace, "animateTransform");
firstCircleAnimate.setAttributeNS(null, "attributeName", "transform");
firstCircleAnimate.setAttributeNS(null, "type", "rotate");
firstCircleAnimate.setAttributeNS(null, "from", "0 400 400");
firstCircleAnimate.setAttributeNS(null, "to", "360 400 400");
firstCircleAnimate.setAttributeNS(null, "begin", "0s");
firstCircleAnimate.setAttributeNS(null, "dur", "5s");
firstCircleAnimate.setAttributeNS(null, "repeatCount", "indefinite");
firstCircle.appendChild(firstCircleAnimate);

secondCircle= document.createElementNS(namespace, "circle");
secondCircle.setAttributeNS(null, "id", "secondCircle");
secondCircle.setAttributeNS(null, "cx", 760);
secondCircle.setAttributeNS(null, "cy", 400);
secondCircle.setAttributeNS(null, "r", 10);
secondCircle.setAttributeNS(null, "fill", "#D0D5D2");
svg.appendChild(secondCircle);

secondCircleAnimate =  document.createElementNS(namespace, "animateTransform");
secondCircleAnimate.setAttributeNS(null, "attributeName", "transform");
secondCircleAnimate.setAttributeNS(null, "type", "rotate");
secondCircleAnimate.setAttributeNS(null, "from", "0 " + firstCircle.getAttributeNS(null, "cx") + " " + firstCircle.getAttributeNS(null, "cy"));
secondCircleAnimate.setAttributeNS(null, "to", "360 " + firstCircle.getAttributeNS(null, "cx") + " " + firstCircle.getAttributeNS(null, "cy"));
secondCircleAnimate.setAttributeNS(null, "begin", "0s");
secondCircleAnimate.setAttributeNS(null, "dur", "2s");
secondCircleAnimate.setAttributeNS(null, "repeatCount", "indefinite");
secondCircle.appendChild(secondCircleAnimate );

Here, I set secondCircleAnimate 's from and to property to firstCircle 's center coordinates, but the first circle itself is rotating and in DOM, the center of first circle is not seems to be changed throughout the rotation. So how can I rotate the second circle around the rotating first circle?

Thanks in advance.

Answer 1

Finally got a solution. I have added a <g> tag around a second circle. I added the same animateTransform for the <g> and make it rotate around the central point and inside the <g> , for the second circle, I make the second circle rotate around the first one.

Just the important thing is the time of duration of first circle and time of duration of second circle should be equal (just to make their rotation in sync).

Added code is :

group= document.createElementNS(namespace, "g");
group.setAttributeNS(null, "id", "group");
svg.appendChild(group);

groupAnimate=  document.createElementNS(namespace, "animateTransform");
groupAnimate.setAttributeNS(null, "attributeName", "transform");
groupAnimate.setAttributeNS(null, "type", "rotate");
groupAnimate.setAttributeNS(null, "from", "0 400 400");
groupAnimate.setAttributeNS(null, "to", "360 400 400");
groupAnimate.setAttributeNS(null, "begin", "0s");
groupAnimate.setAttributeNS(null, "dur", "5s");
groupAnimate.setAttributeNS(null, "repeatCount", "indefinite");
group.appendChild(groupAnimate);

Answer 2

I suspect that this part of your code isn't update dynamically:

secondCircleAnimate.setAttributeNS(null, "from", "0 " + firstCircle.getAttributeNS(null, "cx") + " " + firstCircle.getAttributeNS(null, "cy"));
secondCircleAnimate.setAttributeNS(null, "to", "360 " + firstCircle.getAttributeNS(null, "cx") + " " + firstCircle.getAttributeNS(null, "cy"));

I think parameters from and to get their static values after the strings concatenation, and afterwards don't have their values updated.

Two possible solutions:

1. with JS: write function which will calculate current position of the firstCircle.
2. with CSS only: do two containers for two circles, one nest another, so first container rotates around given point, and the second around its parent element (first container);