Как я могу оживить элемент, чтобы вращаться, а также орбиту с помощью JavaScript

Мне было интересно, есть ли способ установить атрибут transform для элемента, чтобы он мог вращаться (вокруг своего собственного центра) и вращаться вокруг другой точки. Это то, что я до сих пор: http://jsfiddle.net/8nmtrg84/1/

function timerTick() {
 with (new Date()) {
 var  v;
 v = 8 * getSeconds();
 document.getElementById('left_gear_small').setAttribute('transform', 'rotate(' + v + ', 100, 100)');
 setTimeout(timerTick, 1000);
 }
}

Мне удалось повернуть его вокруг точки, однако я не уверен, как повернуть его вокруг своего центра на 0 одновременно.

Спасибо!

Источник

2 ответа

Решение

Короткий ответ:

Сначала вы должны найти, где находится центр вашего объекта. Вы предоставили (100,100) как координаты центра вращения, но центр вашего объекта шестерни на самом деле в (65,141) ( ссылка jsfiddle). Как только это будет исправлено, вы можете подумать о том, как заставить его вращаться по орбите. Это можно сделать, заключив его в <g> элемент с другим преобразованием вращения ( снова jsfiddle).

Более длинный ответ:

Вы подходите к этому неправильно. С вращениями работать гораздо проще, если вы начинаете с объекта, источник которого уже находится в той точке, в которой вы хотите его вращать. В частности, для объектов передач очень легко вычислить координаты с помощью небольшого кода. Если вам тоже нужно применить смещение перевода, используйте другой <g> элемент.

Вот пример с двумя шестернями, которые вращаются вокруг своих центров, вращаясь вокруг третьей точки:

var theta = 0;
function rotate_gears() {
  theta = theta + 3;
  document.getElementById('gear1').setAttribute('transform', 'rotate(' + theta + ')');
  document.getElementById('gear2').setAttribute('transform', 'rotate('+(15-theta*3) + ')');
  document.getElementById('spin').setAttribute('transform', 'rotate(' + (theta/2) + ')');
}
setInterval(rotate_gears,30);
<svg width="200" height="200" viewBox="0 0 100 100">
  <g transform="translate(50,50)">
    <g id="spin" transform="rotate(0)">
      <g transform="translate(-20,0)">
      <path id="gear1" fill="gold" d="M0 42.5 1.41 42.98 3.07 46.9 4.66 47.27 6.2 47.09 7.66 46.37 8.39 42.17 9.65 41.39 11 41.05 12.48 41.15 15.11 44.51 16.73 44.46 18.18 43.88 19.4 42.81 19.02 38.57 20.03 37.48 21.25 36.81 22.71 36.52 26.11 39.08 27.67 38.61 28.92 37.68 29.82 36.33 28.35 32.33 29.05 31.02 30.05 30.05 31.38 29.39 35.34 30.99 36.72 30.13 37.68 28.92 38.2 27.38 35.75 23.89 36.09 22.44 36.81 21.25 37.92 20.27 42.15 20.79 43.27 19.6 43.88 18.18 43.99 16.56 40.72 13.82 40.67 12.34 41.05 11 41.88 9.76 46.1 9.17 46.87 7.74 47.09 6.2 46.77 4.61 42.91 2.81 42.48 1.39 42.5 0 42.98-1.41 46.9-3.07 47.27-4.66 47.09-6.2 46.37-7.66 42.17-8.39 41.39-9.65 41.05-11 41.15-12.48 44.51-15.11 44.46-16.73 43.88-18.18 42.81-19.4 38.57-19.02 37.48-20.03 36.81-21.25 36.52-22.71 39.08-26.11 38.61-27.67 37.68-28.92 36.33-29.82 32.33-28.35 31.02-29.05 30.05-30.05 29.39-31.38 30.99-35.34 30.13-36.72 28.92-37.68 27.38-38.2 23.89-35.75 22.44-36.09 21.25-36.81 20.27-37.92 20.79-42.15 19.6-43.27 18.18-43.88 16.56-43.99 13.82-40.72 12.34-40.67 11-41.05 9.76-41.88 9.17-46.1 7.74-46.87 6.2-47.09 4.61-46.77 2.81-42.91 1.39-42.48 0-42.5-1.41-42.98-3.07-46.9-4.66-47.27-6.2-47.09-7.66-46.37-8.39-42.17-9.65-41.39-11-41.05-12.48-41.15-15.11-44.51-16.73-44.46-18.18-43.88-19.4-42.81-19.02-38.57-20.03-37.48-21.25-36.81-22.71-36.52-26.11-39.08-27.67-38.61-28.92-37.68-29.82-36.33-28.35-32.33-29.05-31.02-30.05-30.05-31.38-29.39-35.34-30.99-36.72-30.13-37.68-28.92-38.2-27.38-35.75-23.89-36.09-22.44-36.81-21.25-37.92-20.27-42.15-20.79-43.27-19.6-43.88-18.18-43.99-16.56-40.72-13.82-40.67-12.34-41.05-11-41.88-9.76-46.1-9.17-46.87-7.74-47.09-6.2-46.77-4.61-42.91-2.81-42.48-1.39-42.5 0-42.98 1.41-46.9 3.07-47.27 4.66-47.09 6.2-46.37 7.66-42.17 8.39-41.39 9.65-41.05 11-41.15 12.48-44.51 15.11-44.46 16.73-43.88 18.18-42.81 19.4-38.57 19.02-37.48 20.03-36.81 21.25-36.52 22.71-39.08 26.11-38.61 27.67-37.68 28.92-36.33 29.82-32.33 28.35-31.02 29.05-30.05 30.05-29.39 31.38-30.99 35.34-30.13 36.72-28.92 37.68-27.38 38.2-23.89 35.75-22.44 36.09-21.25 36.81-20.27 37.92-20.79 42.15-19.6 43.27-18.18 43.88-16.56 43.99-13.82 40.72-12.34 40.67-11 41.05-9.76 41.88-9.17 46.1-7.74 46.87-6.2 47.09-4.61 46.77-2.81 42.91-1.39 42.48z"
      />
        </g>
      <g transform="translate(40,0)">
        <path id="gear2" fill="orange" transform="rotate(15)" d="M0 12.5 1.27 12.94 3.32 16.67 5.08 16.75 6.7 16.17 8.01 14.99 7.22 10.81 7.93 9.66 8.84 8.84 10.05 8.25 14.13 9.44 15.43 8.25 16.17 6.7 16.27 4.93 12.75 2.54 12.44 1.23 12.5 0 12.94-1.27 16.67-3.32 16.75-5.08 16.17-6.7 14.99-8.01 10.81-7.22 9.66-7.93 8.84-8.84 8.25-10.05 9.44-14.13 8.25-15.43 6.7-16.17 4.93-16.27 2.54-12.75 1.23-12.44 0-12.5-1.27-12.94-3.32-16.67-5.08-16.75-6.7-16.17-8.01-14.99-7.22-10.81-7.93-9.66-8.84-8.84-10.05-8.25-14.13-9.44-15.43-8.25-16.17-6.7-16.27-4.93-12.75-2.54-12.44-1.23-12.5 0-12.94 1.27-16.67 3.32-16.75 5.08-16.17 6.7-14.99 8.01-10.81 7.22-9.66 7.93-8.84 8.84-8.25 10.05-9.44 14.13-8.25 15.43-6.7 16.17-4.93 16.27-2.54 12.75-1.23 12.44z"
        />
      </g>
    </g>
  </g>
</svg>

Источник

Ты можешь использовать animateTransform выполнить различные повороты, как в этом коротком примере: http://jsfiddle.net/hmct2eof/

Нет JavaScript не требуется. Только SVG:

<svg width="320" height="320" viewBox="-160 -160 320 320">
  <circle fill="#0f0" stroke="#000" cx="0" cy="0" r="5"/>
  <g>
    <animateTransform attributeName="transform"
        attributeType="XML"
        type="rotate"
        from="360"
        to="0"
        dur="7.33s"
        repeatCount="indefinite"/>            
    <g transform="translate(0, 100)">
        <path fill="orange" stroke="#000" d="M0-20L10,10L0,0L-10,10Z">
            <animateTransform attributeName="transform"
                      attributeType="XML"
                      type="rotate"
                      from="0"
                      to="360"
                      dur="1s"
                      repeatCount="indefinite"/>            
        </path>
    </g>
  </g>
</svg>
Источник
Другие вопросы по тегам