如何解决SVG元素无法围绕自身中心点旋转的问题

你的代码存在两处错误，导致线条没有围绕自身中心点旋转：

• transform-origin: 50px 50px被错误写在了动画的50%关键帧中，动画初始0%状态没有定义该属性，浏览器会使用SVG元素默认的旋转原点——SVG视口左上角(0,0)，动画前半段会出现原点跳变。
• 动画关键帧逻辑错误：仅在50%进度时设置旋转360度，后半段动画会从360度回到初始0度，无法实现匀速连续旋转。

• 把transform-origin属性直接绑定到动画元素.it的基础样式上，不要放在关键帧内，保证动画全程旋转原点固定。如果不想写死像素值，直接用transform-origin: center即可，效果和50px 50px完全一致。
• 把旋转360度的逻辑放到100%关键帧，实现整段动画匀速转满一圈的无限循环效果。

修正后的核心样式代码：

.it {
  transform-origin: 50px 50px;
  animation: spin 2s linear infinite;
}

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="icon" href="data:;base64,iVBORw0KGgo=">
  <meta name="viewport" content="width=device-width, user-scalable=yes">
</head>
<body>
<style>
  .c {
    transform: translate(200px, 200px);
  }

  .it {
    transform-origin: 50px 50px;
    animation: spin 2s linear infinite;
  }

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

</style>
<svg class="c" width="100" height="100">
  <path d="M 0 50 L 100 50" stroke="black" class="it"></path>
</svg>
</body>
</html>

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