具有特定宽度和高度的SVG文本

Question

我正在尝试在SVG中放置和拉伸文本，在这个例子中，我希望文本的高度为4厘米，但它似乎有一些填充物！

<svg x="0px" y="0px" width="10cm" height="10cm">
 <text x="0cm" y="4cm" font-family="'Arial'" font-size="4cm">Random text</text>
</svg>

如何删除填充并将文本设置为正好4厘米的高度？ 如果在SVG中不可能，是否有其他矢量图形格式可以用php轻松生成并且可以执行此任务？

Answer 1

文本填充的高度取决于字体的设计方式。在您的示例中，“H”不会扩展“em”测量的整个高度。将会有到达基线以下的字形（如'y'，'g'等）和达到更高的字形（例如重音符号）。

您可以通过选择比您想要的垂直尺寸更大的字体大小来进行补偿。对于特定字体，font-size与渲染高度的比率应该是常量。因此，一旦你找到合适的比例，就可以将它用于任何文本。

例如，请查看以下示例

<svg x="0px" y="0px" width="20cm" height="20cm" font-family="Arial">

  <!-- text to fit 4cm high rectangle -->
  <rect x="0" y="1cm" width="100%" height="4cm" fill="red" fill-opacity="0.2"/>
  <text x="0cm" y="5cm" font-family="'Arial'" font-size="4cm">
      <tspan font-size="1.4em">Random text</tspan>
  </text>

</svg>

我想让文字填充红色矩形的高度。我首先将font-size设置为4cm，然后使用<tspan>将字体大小设置为1.4em。对于Arial，这是大写字母高度与em大小之间的比率。我只是通过实验找到了这个。

现在我知道这个比例，我可以再次使用它来获得不同的字体大小：

<svg x="0px" y="0px" width="20cm" height="20cm" font-family="Arial">

  <!-- text to fit 3cm high rectangle -->
  <rect x="0" y="7cm" width="100%" height="3cm" fill="red" fill-opacity="0.2"/>
  <text x="0cm" y="10cm" font-family="'Arial'" font-size="3cm">
      <tspan font-size="1.4em">Random text</tspan>
  </text>

</svg>

我已将字体大小更改为3厘米，但我可以重复使用1.4比例以使其适合新尺寸。

Demo fiddle here

不幸的是，这个技巧仅适用于高度，对于特定的字体大小，高度是常量。没有简单的方法可以使一段文字适合特定的宽度。除了为每段文字应用自定义transform或修补font-size-adjust之外。

Answer 2

关于填充， dx 属性控制SVG对象内文本的位置。

像这样：

<svg x="0px" y="0px" width="10cm" height="5.5cm" style="background: #ace; fill: #579;">

   <text dx="-0.3cm" x="0cm" y="4cm" font-family="Arial" font-size="4cm">Hello</text>

</svg>

请注意，dx属性设置为 -0.3cm ，将文本移到左侧。

Answer 3

这是我能提出的最佳解决方案

<svg width="500px" height="500px" style="background: #EEE">
    <text x="0" y="0" style="dominant-baseline: hanging;font-size:500px"
    textLength="100%" lengthAdjust="spacingAndGlyphs">Hello</text>
</svg>

底部还有边距，因此文字不完全适合框内

demo