Question

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

我知道svg中使用了text标签，但我发现它是单行的。然后，当我给它textLength（以便它包含在特定的svg中）时，它的单词会相互重叠。如何在svg标签中放置多行文本？我试过的代码如下：

＆＃13;

<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>

＆＃13;

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上下文的一部分，因此需要设置width和height，否则它将没有固有的大小。

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

1 个答案: