Поверните круг вокруг другого вращающегося круга - PullRequest
Новая
       4

Поверните круг вокруг другого вращающегося круга

0 голосов
/ 23 ноября 2018

У меня есть круг в 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, центрепервого круга, похоже, не меняется на протяжении всего поворотаТак, как я могу вращать второй круг вокруг вращающегося первого круга?

Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 26 ноября 2018

Наконец-то есть решение.Я добавил тег <g> вокруг второго круга.Я добавил те же animateTransform для <g> и заставил его вращаться вокруг центральной точки и внутри <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);
0 голосов
/ 23 ноября 2018

Я подозреваю, что эта часть вашего кода не обновляется динамически: 

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 получают свои статические значения после объединения строк, а впоследствии - нетобновлены их значения.

Два возможных решения:

  1. с функцией записи JS:, которая будет вычислять текущую позицию firstCircle.
  2. только с CSS: два контейнера для двух окружностей, одно гнездо для другого, поэтому первый контейнер вращается вокруг заданной точки, а второй - вокруг его родительского элемента (первого контейнера);
...