我知道如何在矩形中绘制文本行：
<svg width="200" height="100">
<rect x="0" y="0" width="200" height="100" stroke="red" stroke-width="3px" fill="white"/>
<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text>
</svg>
现在我想打破文本。它应该大致如下所示：
line.....
TEXT
line.....
我尝试在文本中使用<br>，但这没用。
这应该在现代浏览器（Chrome，Edge，Firefox等）中呈现
结果应如下所示：
对于多行录制，使用tspan
很方便在svg中只有绝对定位。
x和y坐标确定文本的第一个字符的位置
<tspan>标签有助于缩短标签输入<text>
否则，我将不得不为每一行文字写出标记<text>
<svg width="40%" height="40%" viewBox="0 0 200 100">
<rect x="0" y="0" width="200" height="100" stroke="red" stroke-width="3px" fill="white"/>
<text fonnt-size="48" >
<tspan x="4em" y="1.5em">line1 ...</tspan>
<tspan x="50%" y="50%" text-anchor="middle" >TEXT</tspan>
<tspan x="4em" y="4.5em">line2 ...</tspan>
</text>
</svg>
更新
如果您需要使用SVG中的CSS规则放置多文本，请使用foreignObject
<svg width='200' height='100' style="border:1divx solid gray; ">
<rect x="0" y="0" width="200" height="100" stroke="red" stroke-width="3px" fill="none"/>
<foreignObject x="0" y="0" width="200" height="100">
<style>
.container
{
width: 200px;
font-size:20px;
}
.line
{
padding:0.3em 0.3em 0.3em 3em;
}
.text
{
text-align: center;
vertical-align: middle;
}
</style>
<body xmlns="httdiv://www.w3.org/1999/xhtml">
<div class="container">
<div class="line">line1 .....</div>
<div class="text"> TEXT</div>
<div class="line">line2 .....</div>
</div>
</body>
</foreignObject>
</svg> ,
.SVG标准的一个主要限制是缺少多行文本。无法在.SVG中指定“换行”。您要么需要填写两个<text>字段，要么使用<tspan>元素。不幸的是，即使使用`，您也需要自己滚动，但这看起来像：
<svg width="200" height="100">
<text x="100" y="25" dominant-baseline="middle" text-anchor="middle">
<tspan x="50" dy=".6em">Line1...</tspan>
<tspan x="50" dy="1.2em">TEXT</tspan>
<tspan x="50" dy="1.2em">Line2...</tspan>
</text>
</svg>,
您不能自动中断文本，也不能在SVG中使用BR标签。您需要为每个text / tspan节点定义x，y或dx，dy。
您可以创建一个路径并将该路径分配给代码段中指定的文本。
您可以为所有文本创建1条路径，也可以为许多文本行创建许多路径，因为您需要创建3条路径。
尽管这不是一个适当的解决方案，但是每次您要更改文本/位置时都需要进行修改。仍然是另一种方法。
<svg width="200" height="200">
<path id="my_path" d="M 20,20 l 80 0 M 50 70 l 90 0 M 20 120 l 80 0" stoke-width="10px" stroke="transparent" />
<text font-size="30px">
<textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path">
line..... TEXT line.....
</textPath>
</text>
</svg>