Вращение внедренного объекта SVG в HTML / JS - PullRequest
Новая
       38

Вращение внедренного объекта SVG в HTML / JS

0 голосов
/ 21 марта 2020

Я пытаюсь создать часы для одной руки, которые будут использоваться в качестве обоев на рабочем столе на основе HTML.

Я встроил SVG для руки в HTML и пытаюсь заставить руку вращаться со ссылкой на время, в котором я застрял ...

Вот где я сейчас нахожусь: 

<!DOCTYPE html>
<html>
<body>

<svg width="100%" height="100%" viewBox="0 0 2560 1440" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
  <!-- <rect x="0" y="0" width="2560" height="1440"/> -->
      <path id="Hand" d="M1284.85,707.293C1289.96,709.248 1293.6,714.203 1293.6,720C1293.6,725.722 1290.06,730.623 1285.05,732.63L1285.05,865.05L1281.8,1215.35L1278.2,1215.35L1274.95,865.05L1274.95,732.63C1269.94,730.623 1266.4,725.722 1266.4,720C1266.4,714.203 1270.04,709.248 1275.15,707.293L1276.4,626.7L1283.6,626.7L1284.85,707.293Z" style="fill:#ffd000;"/>
</svg>

<script>
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();

    hour = hour%24;
    hour = (hour*Math.PI/12)+(minute*Math.PI/(12*60))+(second*Math.PI/(12*60*60));

    setInterval(drawClock, 1000);

    function drawClock() {
    var vector = document.getElementById("Hand")
    vector.setAttribute("transform", "rotate("hour", 1280, 720)");
  }
  </script>


</html>
</body>

Любая помощь или указатели будут с благодарностью!

1 Ответ

1 голос
/ 21 марта 2020

Вы должны использовать css transform, ключевым компонентом для его работы будет transform-origin это свойство css, позволяющее вам сказать, что элемент должен вращаться вокруг основания руки, а не ее средний. 

function moveHand() {
  // Create time-related variables.
  const now = new Date();
  
  /** Divide current hour by hours in day, 
   * then multiply by 360 to get it to circle and 
   * offset by 180 to have 0 on top
   */
  document.querySelector("#hours").style.transform =   `rotate(${now.getHours()   / 24 * 360 - 180}deg)`;
  // Same for minutes and seconds
  document.querySelector("#minutes").style.transform = `rotate(${now.getMinutes() / 60 * 360 - 180}deg)`;
  document.querySelector("#seconds").style.transform = `rotate(${now.getSeconds() / 60 * 360 - 180}deg)`;
;

	requestAnimationFrame(moveHand)
}

// Use `requestAnimationFrame` instead of interval, it is the way to schedule render tasks
requestAnimationFrame(moveHand);
.hand {
  transform-origin: 50% 50%;
}
<svg id="clock" width="100%" height="100%" viewBox="0 0 2560 1440" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
  <!-- <rect x="0" y="0" width="2560" height="1440"/> -->
  <path class="hand" id="seconds" d="M1284.85,707.293C1289.96,709.248 1293.6,714.203 1293.6,720C1293.6,725.722 1290.06,730.623 1285.05,732.63L1285.05,865.05L1281.8,1215.35L1278.2,1215.35L1274.95,865.05L1274.95,732.63C1269.94,730.623 1266.4,725.722 1266.4,720C1266.4,714.203 1270.04,709.248 1275.15,707.293L1276.4,626.7L1283.6,626.7L1284.85,707.293Z" style="fill:#ffd000;" />
  <path class="hand" id="minutes" d="M1284.85,707.293C1289.96,709.248 1293.6,714.203 1293.6,720C1293.6,725.722 1290.06,730.623 1285.05,732.63L1285.05,865.05L1281.8,1215.35L1278.2,1215.35L1274.95,865.05L1274.95,732.63C1269.94,730.623 1266.4,725.722 1266.4,720C1266.4,714.203 1270.04,709.248 1275.15,707.293L1276.4,626.7L1283.6,626.7L1284.85,707.293Z" style="fill:#d000ff;" />
  <path class="hand" id="hours" d="M1284.85,707.293C1289.96,709.248 1293.6,714.203 1293.6,720C1293.6,725.722 1290.06,730.623 1285.05,732.63L1285.05,865.05L1281.8,1215.35L1278.2,1215.35L1274.95,865.05L1274.95,732.63C1269.94,730.623 1266.4,725.722 1266.4,720C1266.4,714.203 1270.04,709.248 1275.15,707.293L1276.4,626.7L1283.6,626.7L1284.85,707.293Z" style="fill:#d0ff00;" />
</svg>
...