SVG动画旋转中transform-origin属性失效问题求助

我明白你为啥头疼了——这个SVG的transform-origin坑确实容易踩！你想让六边形绕自身中心原地旋转，但设置的transform-origin: 50% 50%没起作用，核心原因是SVG元素的坐标系统和普通HTML元素默认规则不同。

问题根源 #

SVG元素默认的transform-box属性值是view-box，这意味着transform-origin的百分比是相对于整个SVG的视口（viewBox）来计算的，而不是多边形自身的边界框。所以你设置的50% 50%其实指向的是整个SVG的中心，而非六边形的中心，自然达不到原地旋转的效果。

解决方案 #

这里给你三种可行的解决办法，选哪种都能实现需求：

方法1：添加transform-box: fill-box（推荐）

只需要给.hex类加上transform-box: fill-box，就能让transform-origin的百分比基于多边形自身的边界框计算，这样50% 50%就会精准指向六边形的中心：

.hex {
  stroke-dasharray: 900;
  animation: draw-hex 1.9s infinite;
  transform-origin: 50% 50%;
  transform-box: fill-box; /* 关键新增属性 */
}

方法2：在rotate函数中直接指定旋转中心

不需要依赖transform-origin，直接在rotate()里传入旋转中心的绝对坐标（也就是六边形的中心，对应代码里circle的cx="486"和cy="521"）：

@keyframes draw-hex {
  0% {
    stroke-dashoffset: -900;
    transform: rotate(0deg 486 521)
  }
  100% {
    stroke-dashoffset: 0;
    transform: rotate(360deg 486 521);
  }
}

方法3：调整多边形的transform原点

修改polygon的transform属性，让它以自身中心为原点，这样默认旋转就会绕中心进行：

<!-- 替换原有的polygon标签 -->
<polygon class="hex" stroke="#1F3380" stroke-width="3" 
         transform="translate(486.000000, 521.000000)" 
         points="0 -150 129.903811 -75 129.903811 75 0 150 -129.903811 75 -129.903811 -75"/>

这里把所有points的坐标都减去了中心坐标(486,521)，再通过translate把多边形移回原位置，此时旋转默认就是绕中心进行，甚至可以去掉transform-origin设置。

验证效果 #

修改后，六边形就会完美绕自身中心旋转，和你期望的原地旋转效果一致啦～

内容的提问来源于stack exchange，提问作者Max Sturges