我在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中,第一个圆的中心在整个旋转过程中似乎没有改变。那么,我怎样才能使第二个圆围绕旋转的第一个圆旋转呢?
提前谢谢。
终于找到了解决方案。我在第二个圆圈周围添加了一个<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);
我怀疑您的这部分代码不是动态更新的:
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:为两个圆做两个容器,一个嵌套另一个,所以第一个容器围绕给定点旋转,第二个围绕其父元素(第一个容器(旋转