如何使用 SVG 基于容器使文本居中并缩放字体大小？

Question

对于响应式网站，我正在尝试使用 SVG 将文本居中并缩放其字体大小，这样我就不需要使用 JavaScript 进行任何计算。

我的第一个问题是我尝试将x="50%" 和y="50%" 与text-anchor="middle" 和alignment-baseline="central" 一起使用，但是虽然这适用于Chrome，但在IE、Edge 和Firefox 中，文本不是垂直居中的，但它的基线是这样文字本身就有点太高了。在没有固定高度的情况下，如何在这些浏览器中垂直居中文本？

我的第二个问题是缩放。到目前为止，我在 Internet 上发现的是使用 lengthAdjust="spacingAndGlyphs" ，但这会产生奇怪的结果，文本看起来会被拉伸。如何像缩放图像一样缩放所有内容？

这是我的起始笔：https://codepen.io/smares/pen/QMVPvN

我还阅读了有关 viewBox 的信息，但我不完全了解如何使用它，因为我没有固定大小的容器。

我必须使用内联 SVG，因为文本实际上是由 Vue 生成的。

Answer 1

垂直对齐

对于垂直对齐问题，问题是由于 Firefox 不支持对齐基线。类似问题可以参考this answer：

不幸的是，虽然这是实现你想要的结果的“正确”方式，但 Firefox 并没有为 SVG 文本模块 ('SVG in Firefox' MDN Documentation) 实现很多表示属性。

编辑（感谢@Robert Longson）：另一方面，支持dominant-baseline (MDN article)，并且似乎实现了相同的效果。

缩放

对于缩放，使用preserveAspectRatio="xMinYMin" 和viewBox 将使SVG（及其text）正确缩放，而不会被拉伸。您可以将 SVG 的 width 和 height 设置为 100% 或其他尺寸...

<svg preserveAspectRatio="xMinYMin" viewBox="0 0 800 450" width="100%" xmlns="http://www.w3.org/2000/svg">

注意使用 100% 设置 SVG 的大小不会在 IE11 中产生适当的结果，可能也在 Edge 中。据我回忆，以像素为单位的维度效果很好。

来自 CSS Tricks 的文章“How to scale SVG”非常清晰和完整，可以理解不同的概念。

更新的代码笔

这里是updated pen，设置了dominant-baseline，以及缩放属性。调整窗口大小以查看相应更新的 SVG 大小。