SVG 占主导地位的基线和小坐标系答案

【问题标题】：SVG dominant baseline and small coordinate systemsSVG 占主导地位的基线和小坐标系
【发布时间】：2020-03-12 20:19:00
【问题描述】：

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

文本完全显示在框外：

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

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

我认为正在发生的事情是，我没有考虑其他一些在像素领域很难设置的测量值，并且由于 1 可能是数百个像素而不是 1 个像素，我认为这是在扔东西关闭。

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

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

【问题讨论】：

使用更大的 viewBox 并扩大您的数字
阅读The Limits of Numbers in SVG 并查看browser compatibility for dominant-baseline
澄清一下，这个1x1 视图框是在更大的外部视图框的上下文中使用的，比如10x10 或20x20。（不是“大”，但大于1x1。）@RobertLongson 如果必须，我会扩大规模，但如果可能的话，我宁愿避免它。这个坐标系非常方便，到目前为止它适用于所有内容，甚至是文本，除了dominant-baseline。
@enxaneta dominant-baseline 基本上一直存在，得到很好的支持，并且在我的浏览器中绝对支持。至于数字限制，我没有超过它们，即使是博客中提到的极端用例示例。我怀疑还有其他一些基于像素大小而不是字体大小的测量值，我需要对其进行调整以使其恢复比例。
@Kaiido 是的！很奇怪。我刚刚做了一个跨浏览器测试，没有其他浏览器看起来像我的……包括相同版本的 Chrome。我修改了测试，将font-size 从svg 选择器中分离出来，因为它影响了宽度/高度：fiddle.jshell.net/uk40x3v6/show 框的大小合适，但第二个框的文本在框之外。但是，当我在 18 种不同的浏览器上进行测试时，一切正常！我正在重新重新检查我的测试和假设。

标签： css svg

【解决方案1】：

我认为这是一个 Chrome 错误。我不确定哪个更新修复了它，但它开始工作了。

现在 Chrome v84 一切正常。

【讨论】：