Html 加载器CSS中的中心对齐旋转SVG

我正在尝试将SVG从0度设置为360度。但是，如果我使用transform:rotate属性，那么当浏览器调整大小时，svg将失去其位置，并且中心未对齐。我使用转换原点到50%。但是svg失去了它的位置

HTML:

<div id="hexagon-spinner">
  <Hexagon className="hexagon-loader" viewBox="0 0 65.103 75.174" />
</div>

---

首先，当它是

100%

时，应该定义

360度

，而不是

359度

  100% {
    transform: rotate(359deg); // ->> 360deg
  }

如何处理平均值

@keyframes spin {
  0% {
    transform: rotate(0deg);
    transform-origin: -50% 50%;
  }
  100% {
    transform: rotate(360deg);
    transform-origin: -50% 50%;
  }
}

最后， 如果我们需要缩短代码（因为默认情况下它将以

0deg

开头），如果我们只输入参数

100%

，就不会有问题

@keyframes spin {
  100% {
    transform: rotate(360deg);
    transform-origin: -50% 50%;
  }
}

简单代码片段

@关键帧旋转{
100% {
变换：旋转（360度）；
变换原点：-50%50%；
}
}
div{
位置：绝对位置；
最高：50%；
左：50%；
动画名称：旋转；
动画持续时间：0.8s；
/*添加的东西*/
动画迭代次数：无限；
变换原点：-50%50%；
}

---

加载

请同时共享html代码。@MinalChauhan用HTMLSVG更新了问题svg正在失去它的位置。你现在可以查看这里的截图了，我知道你是认真的。我添加了一个新的例子。前几天晚上我用justify center给孩子们看，现在我知道我做错了什么。谢谢你的帮助！

@keyframes spin {
  100% {
    transform: rotate(360deg);
    transform-origin: -50% 50%;
  }
}