Question

我想知道是否有办法将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，同时。

谢谢！

Answer 1

简答：

首先，您必须找到对象中心的位置。您提供了(100,100)作为旋转中心坐标，但齿轮对象的中心实际上位于(65,141)（jsfiddle link）。一旦那样＆＃39;固定，然后你可以考虑如何让它绕其他点运行。这可以通过将其封装在<g>元素中并使用另一个旋转变换（jsfiddle again）来完成。

更长的回答：

你以错误的方式接近这个。如果从一个原点已经位于您希望它旋转的点的对象开始，旋转将更容易使用。特别是对于齿轮对象，calculate the coordinates with a bit of code非常容易。如果您还需要应用翻译偏移量，请使用其他<g>元素。

这是一个示例，其中两个齿轮围绕自己的中心旋转，同时围绕第三点旋转：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用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>

如何动画元素旋转并使用javascript进行轨道运动

2 个答案:

简答：

更长的回答：