如何使用变换原点让 svg 元素从中心旋转？ [复制]答案

【问题标题】：How to get an svg element to rotate from center using transform-origin? [duplicate]如何使用变换原点让 svg 元素从中心旋转？ [复制]
【发布时间】：2021-07-17 21:10:37
【问题描述】：

我正在尝试对 svg rect 元素进行非常简单的旋转。我希望这个元素相对于它的中心旋转，我正在尝试使用 transform-origin 属性来实现这一点（参见 sn-p）。尽管尝试使用“中心”或“50%”从中心旋转，但它从不想从其真正的中心旋转。

谁能解释为什么这不起作用？我看过类似的帖子，关于 transform-origin 是 css 属性，而不是 svg 属性，但我相信这现在已经过时了，transform-origin 应该可以工作。

此方法适用于 div 元素，但不适用于 svg 元素。

svg {
  border: solid;
}

svg > rect {
  animation: test 3s infinite;
}

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

<svg width="200" height="110" viewBox="-200 -400 1000 1000">
  <rect width="600" height="300" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

【问题讨论】：

标签： css svg css-animations transform

【解决方案1】：

不要在关键帧中使用transform-origin，也不要忘记设置transform-box: fill-box;。

svg {
  border: solid;
}

svg>rect {
  transform-box: fill-box; /* you need this for SVGs */
  transform-origin: center center; /* moved here */
  animation: test 3s infinite;
}

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

<svg width="200" height="110" viewBox="-200 -400 1000 1000">
  <rect width="600" height="300" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

【讨论】：