SVG主导基线和小坐标系

Question

我使用一个很小的SVG坐标系。整个屏幕可能小到10x10个单位。

通常情况下，这不是一个问题，只要我能正确地缩放所有内容。然而，我有一个问题垂直居中一些文本。以此SVG为例：

svg {
  width: 20em;
  height: 20em;
}

svg text {
  font-size: 0.2px;
}

rect {
  fill: #4f4;
}

<svg viewBox="0 0 1 1" width="1" height="1" x="1" y="5">
  <rect width="1" height="1"></rect>
  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">Text!</text>
</svg>

文本完全不在框内：

我认为正在发生的是，还有一些我没有考虑到的其他度量值是在像素范围内很难设置的，因为1可能是数百个像素，而不是1个像素，所以我认为这是在抛出一些东西。

是这样吗？如果是的话，我能做些什么来让文本垂直居中吗？

编辑：奇怪的是，除了我的笔记本电脑，我不能在任何地方重现这个问题。Windows 10 x64上的Chrome v78。（屏幕截图测试:https://app.crossbrowsertesting.com/public/i81ab6009f75bfdb/screenshots/z3e7e4c7478d4e08b824)即使使用同样的浏览器和操作系统，问题也发生在我的机器上，而不是其他机器上。这不是缓存问题。也许是浏览器渲染标志什么的？Chrome使用什么来渲染SVG？有什么奇怪或特别的吗？

Answer 1

我想这是一个Chrome bug。我不确定是哪一个更新修复了它，但它一路走来就开始工作了。

现在在Chrome V84中一切都很好。