在Firefox中为了拥有真正的transform-origin: center，我们必须添加transform-box: fill-box。它在休闲情况下运作良好，但存在一些问题。
当我们有一个小svg的viewBox（例如<svg viewBox="0 0 10 10">）并且我们必须使用浮动数字以便在svg空间中提供精确的中心位置时会出现一些奇怪的行为 - 忽略fill-box。 / p>
https://jsfiddle.net/6jckL4ne/
@keyframes animRotate {
from {
transform: rotate(360deg);
}
}
svg {
background-color: pink;
}
.spin {
animation: animRotate 3s infinite;
transform-origin: center;
transform-box: fill-box;
fill: green;
}<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" viewBox="0 0 1 1">
<rect class="spin" height=".5" width=".5" x="0.25" y="0.25"/>
<line x1="0.5" x2="0.5" y1="0" y2="1" stroke="black" stroke-width="0.01"></line>
<line x1="0" x2="1" y1="0.5" y2="0.5" stroke="black" stroke-width="0.01"></line>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" viewBox="0 0 100 100">
<rect class="spin" height="50" width="50" x="25" y="25"/>
<line x1="50" x2="50" y1="0" y2="100" stroke="black" stroke-width="1"></line>
<line x1="0" x2="100" y1="50" y2="50" stroke="black" stroke-width="1"></line>
</svg>
</body>
两个矩形（左和右）应该在每个svg的中心（两条黑线的交点）旋转。