围绕另一个旋转的圆圈旋转一个圆圈

Question

我在 svg 中有一个围绕给定点旋转的圆。我又加了一个圈。我想围绕第一个旋转圆旋转第二个圆。我怎样才能做到这一点？到目前为止，我能够围绕一个点旋转第一个圆。第二个圆在旋转，但不围绕第一个旋转。我正在分享我的代码：

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 );

在这里，我将secondCircleAnimate的起点和终点属性设置为firstCircle的圆心坐标，但是第一个圆本身是旋转的并且在DOM，第一个圆的中心似乎在整个旋转过程中没有改变。那么如何绕着旋转的第一个圆圈旋转第二个圆圈呢？

提前致谢。

Answer 1

我怀疑你的这部分代码不是动态更新的：

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"));

我认为参数 from 和 to 在字符串连接后获得它们的静态值，之后没有更新它们的值。

两种可能的解决方案：

with JS: 编写计算当前位置的函数第一个圈子。
仅 CSS：为两个圆做两个容器，一个嵌套另一个，因此第一个容器围绕给定点旋转，第二个围绕其父元素（第一个容器）旋转；

Answer 2

终于找到解决办法了。我在第二个圆圈周围添加了一个 <g> 标签。我为 <g> 添加了相同的 animateTransform 并使其围绕中心点和 <g> 内部旋转，对于第二个圆圈，我使第二个圆圈围绕第一个圆圈旋转。

重要的是第一圈的持续时间和第二圈的持续时间应该相等（只是为了使它们的旋转同步）。

添加的代码是：

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);

围绕另一个旋转的圆圈旋转一个圆圈

Rotate circle around another rotating circle

javascript

svg

rotation

svg-animate