问题

Definition

In Firefox in order to have real transform-origin: center we have to add transform-box: fill-box. It works very well in casual situations, but there are some problems.

When we have small svg's viewBox (eg. <svg viewBox="0 0 10 10">) and we have to use floated numbers in order to provide exact center position in svg space there is some strange behaviour — fill-box is ignored.

Example

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>