我正在尝试对 svg 矩形元素进行非常简单的旋转。我希望这个元素相对于它的中心旋转，我试图使用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>
不要使用transform-origin在关键帧中，不要忘记设置transform-box: fill-box; https://developer.mozilla.org/en-US/docs/Web/CSS/transform-box also.
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
