我正在使用非常小的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>

文本完全显示在框外：

但是，如果我从middle属性中删除了dominant-baseline值，则文本会重新出现在框中：

提琴：https://jsfiddle.net/uk40x3v6/

我认为正在发生的事情是我没有考虑其他一些度量，这很难在像素范围内设置，并且由于1可能是数百个像素而不是1个像素，所以我认为这是扔东西。

是这样吗？如果是这样，我可以做些什么来使文本垂直居中？

编辑：奇怪的是，除了笔记本电脑之外，我无法在其他任何地方重现此问题。 Windows 10 x64上的Chrome v78。 （屏幕快照测试：https://app.crossbrowsertesting.com/public/i81ab6009f75bfdb/screenshots/z3e7e4c7478d4e08b824）即使使用了完全相同的浏览器和操作系统，问题仍在我的计算机上发生，但在其他计算机上则没有。这不是缓存问题。也许浏览器渲染标志之类的东西？ Chrome依赖什么来呈现SVG？有什么奇怪或特别的吗？