SVG path 旋转动画执行时元素位置发生偏移的问题咨询

根因说明 #

SVG元素应用CSS变换时，默认的变换原点transform-origin为整个SVG画布的左上角坐标(0, 0)，而非路径元素自身的几何中心，直接应用旋转动画会让路径绕画布左上角旋转，最终出现位置偏移。

修复方法 #

给需要添加动画的路径元素补充两个CSS属性即可：

• 新增transform-box: fill-box：将变换的计算基准修改为路径自身的边界盒，不再以整个SVG画布为基准
• 新增transform-origin: center：指定旋转原点为路径自身的中心位置

完整可运行代码 #

/* 原有旋转动画逻辑不变 */
@keyframes rotate{
  from{transform: rotate(0deg);}
  to{transform: rotate(360deg)}
}

/* 给目标路径元素添加的样式 */
.rotate-path {
  /* 按需调整动画时长、循环规则等参数 */
  animation: rotate 3s linear infinite;
  /* 核心修复属性 */
  transform-box: fill-box;
  transform-origin: center;
}

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