Chrome中的SVG文本基线位置不是按比例不变的

Question

我有一个包含“foo”和“bar”字样的SVG：

<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" viewBox="0 0 200 200">
    <text x="10px" y="10px" font-size="10px">
        foo
    </text>
    <text x="10px" y="10px" font-size="10px" dominant-baseline="hanging">
        bar
    </text>
</svg>

另一个几乎相同的SVG，除了坐标系缩小了10倍：

<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" viewBox="0 0 20 20">
    <text x="1px" y="1px" font-size="1px">
        foo
    </text>
    <text x="1px" y="1px" font-size="1px" dominant-baseline="hanging">
        bar
    </text>
</svg>

在Safari和Firefox中，这两个SVG在屏幕上产生大致相同的结果，但在Chrome中，后一个SVG在两行文本之间存在很大差距。

这是一个错误吗？有没有办法显示与所有三个浏览器兼容的文本，同时仍允许我使用我想要的viewBox设置？