SVG如何在合适位置对长文本换行？是否支持自动换行功能？

结论先行：SVG原生的<text>元素本身不支持自动换行特性。

• SVG 1.1及更早版本的官方标准中，<text>标签默认按照单行逻辑渲染文本，即使文本长度超出了预设的容器范围也不会自动折行。如果要实现多行效果，需要手动拆分文本内容，通过嵌套<tspan>标签逐行指定位置和内容来模拟换行。
• 如果你需要和HTML一致的自动换行能力，可以使用SVG提供的<foreignObject>标签，在内部嵌入HTML的普通文本块元素，即可直接复用HTML的自动换行规则，示例代码如下：

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <foreignObject x="20" y="20" width="260" height="160">
    <div xmlns="http://www.w3.org/1999/xhtml" style="font-size:14px; line-height:1.5;">
      这段文本达到260px的宽度后会自动换行，和普通HTML页面的换行表现完全一致，不需要手动拆分内容。
    </div>
  </foreignObject>
</svg>

• 新增的SVG 2标准中加入了inline-size属性的支持，给<text>元素设置该属性指定宽度后即可实现自动换行，但目前主流浏览器对该特性的兼容性还不足，生产环境不建议直接使用。

内容的提问来源于stack exchange，提问作者Thom