如何使用 transform-origin 使 svg 元素从中心旋转？

Question

我正在尝试对 svg 矩形元素进行非常简单的旋转。我希望这个元素相对于它的中心旋转，我正在尝试使用 transform-origin 属性来实现这一点（参见代码片段）。尽管尝试使用“中心”或“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>

Answer 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>

如何使用 transform-origin 使 svg 元素从中心旋转？

How to get an svg element to rotate from center using transform-origin?

css

svg

transform

css-animations