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的属性from和to设置为firstCircle的中心坐标，但是第一个圆本身正在旋转，在DOM中，第一个圆的中心似乎不是在整个轮换过程中发生了变化。那么如何围绕旋转的第一个圆旋转第二个圆？

谢谢。

Answer 1

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

重要的是，第一个圆圈的持续时间与第二个圆圈的持续时间应该相等（只是为了使其旋转同步）。

添加的代码是：

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

我怀疑您的代码的这一部分没有动态更新：

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在字符串连接后会获得其静态值，此后就不会更新其值。

两种可能的解决方案：

使用JS：写入函数，将计算当前位置第一圈。
仅使用CSS：在两个圆上做两个容器，一个嵌套另一个，所以第一个容器绕给定点旋转，第二个容器绕其父元素旋转（第一个容器）；

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

2 个答案: