对于响应式网站，我试图将文本居中并使用SVG扩展其字体大小，这样我就不需要使用JavaScript进行任何计算。
我的第一个问题是我尝试将x="50%"和y="50%"与text-anchor="middle"和alignment-baseline="central"一起使用，但这在Chrome，IE，Edge和Firefox中有效不是垂直居中，但它的基线是这样的，文本本身有点太高。如何在没有固定高度的情况下将文本在这些浏览器中垂直居中？
我的第二个问题是缩放。我到目前为止在互联网上发现的是使用lengthAdjust="spacingAndGlyphs"但是这会产生奇怪的结果，文本显得很紧张。如何缩放所有内容，就像缩放图像一样？
这是我的笔：https://codepen.io/smares/pen/QMVPvN
我也读过viewBox，但我不完全明白如何使用，因为我没有固定尺寸的容器。
我必须使用内联SVG，因为文本实际上是由Vue生成的。
答案 0 :(得分：0)
对于垂直对齐问题，问题是由于Firefox不支持对齐基线这一事实。您可以将this answer引用到类似的问题：
不幸的是，虽然这是＆＃34;正确的＆＃34;实现你的目标之后的方式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">
N.B。使用100%设置SVG的大小不会在IE11中产生适当的结果，也可能在Edge中产生。据我所知，像素尺寸的效果很好。
文章＆＃34; How to scale SVG＆＃34;来自CSS Tricks非常清楚和完整，以理解不同的概念。
以下是updated pen，其中设置了dominant-baseline，以及缩放属性。调整窗口大小以查看相应更新的SVG大小。