Firefox中SVG小viewBox搭配浮点数时transform-box失效问题咨询

在Firefox里想要让SVG元素真正以自身中心作为变换原点，常规的正确做法是同时设置：

• transform-origin: center
• transform-box: fill-box

这个组合在大多数日常场景中都能完美生效，但存在一个容易被忽略的异常场景：当SVG使用了极小的viewBox（比如<svg viewBox="0 0 10 10">），并且需要在SVG自身坐标系内用浮点数指定精确的中心位置时，fill-box属性会被浏览器忽略，导致transform-origin: center的设置完全不起作用。

举个实际的代码例子来还原这个问题：

@keyframes animRotate {
  from { transform: rotate(360deg); }
}

svg {
  width: 200px;
  height: 200px;
  border: 1px solid #eee;
}

.target-element {
  transform-origin: center;
  transform-box: fill-box;
  animation: animRotate 2s linear infinite;
}

<svg viewBox="0 0 10 10">
  <rect class="target-element" x="2.5" y="2.5" width="5" height="5" fill="#4299e1" />
</svg>

在这个例子里，你本以为蓝色矩形会围绕自身中心匀速旋转，但实际在Firefox中运行时，它的旋转原点会完全偏离预期，这就是因为小viewBox搭配浮点数位置时，fill-box的解析出现了异常。

内容的提问来源于stack exchange，提问作者ziom