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