响应式SVG图像中具有不同大小的居中文本

Question

如何使用不同尺寸的文本获得可扩展 SVG图像，所有文本都以垂直和水平为中心？

我想要实现的目标：

到目前为止我尝试了什么（JSFiddle demo）：

<text x="50" y="30"
        style="text-anchor: middle;alignment-baseline:middle" 
        fill="black" font-family="'Arial'" font-size="20">
            H1 HEADLINE</text>

<text x="50" y="45"
        style="text-anchor: middle;alignment-baseline:middle" 
        fill="black" font-family="'Arial'" font-size="15">
            H2 HEADLINE</text>

提前感谢任何提示:)我无法使用JavaScript。

Answer 1

来自section 10.1 of SVG 1.1：

  

SVG不执行自动换行或自动换行。要实现多行文本的效果，请使用以下方法之一：

     

  
• 作者或创作包需要预先计算换行符并使用多个“文本”元素（每行文本一个）。
  
• 作者或创作包需要预先计算换行符并使用单个“text”元素和一个或多个'tspan'子元素，并为属性'x'，'y'，'dx'和'dy'为那些开始新线的角色设置新的起始位置。 （此方法允许跨多行文本选择用户文本 - 请参阅文本选择和剪贴板操作。）
  
• 表示要在另一个XML命名空间中呈现的文本，例如嵌入在“foreignObject”元素内的XHTML [XHTML]。 （注意：此方法的确切语义目前尚未完全定义。）
  

因此，您需要手动计算垂直位置以获得垂直居中，或使用<foreignObject>在您的SVG中（在正确的位置）嵌入HTML + CSS，可以执行垂直居中，例如使用display:table-cell; vertical-align:middle。