如何将多行文本（一个段落）添加到 svg？

Question

我想向 svg 添加多行文本，这些文本将包含在 svg 中（不会溢出）。我怎样才能做到这一点？

我知道该text标签用于 svg，但我发现它是单行的。然后，当我给出它时textLength（以便它包含在特定的 svg 中），它的单词彼此重叠。如何在 svg 标签中放置可调整的多行文本？我尝试的代码如下：

<svg width="200" height="60" style="border: 1px solid black;">
  <text x="10" y="30" textLength="180" style="font-size: 30px;">The paragraph here</text>
</svg>

Answer 1

这不起作用。SVG 没有断线机制。

也就是说，您可以将 html<p>标签封装为foreignObject：

<svg xmlns="http://www.w3.org/2000/svg"
     width="21cm" height="29.7cm" style="border:1px solid black;">
  <foreignObject x="6.4cm" y="3.6cm" width="10cm" height="10cm">
    <p xmlns="http://www.w3.org/1999/xhtml" 
       style="font-size:48px;">The paragraph here</p>
  </foreignObject>
</svg>

请注意，必须给出名称空间声明，并且您需要编写有效的 XHML 才能使其工作。

另外，foreignObject是SVG上下文的一部分，所以awidth和height需要设置，否则它将没有固有的大小。