在 html/js 中旋转嵌入的 svg 对象答案

【问题标题】：Rotating an embedded svg object in html/js在 html/js 中旋转嵌入的 svg 对象
【发布时间】：2020-07-02 02:35:30
【问题描述】：

我正在尝试创建一个单手时钟以用作基于 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>

任何帮助或指点将不胜感激！

【问题讨论】：

这个 html 文件是否有标题标签和编解码器？
不...您可能需要进一步澄清。
不相关 - 抱歉之前的垃圾邮件

标签： javascript html svg rotation transform

【解决方案1】：

您应该使用 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>

【讨论】：

感谢您的指点，Akxe，非常感谢。我将如何设置由变量定义的旋转角度，在这种情况下是小时？
您需要根据时间计算轮换。并更新元素的样式。 document.querySelector(‘#hand’).style.transform = `rotate(${rotation}deg)`
再次感谢您的帮助。不幸的是，我还没有到。我已经计算了旋转角度，可以手动设置角度，但不能根据时间自动设置。 jsfiddle.net/yh0u5d9z
你没有正确使用 [developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… string)，你的数学也是错误的，最后，你在旋转时钟而不是时钟的指针。编辑为您提供完整的代码示例