如何在SVG中为text元素指定宽度自动换行或在其他SVG元素内实现文本包裹

目前SVG 2规范中提到的text原生自动换行特性主流浏览器支持度有限，实际开发中常用以下两种落地方案：

方案1：使用foreignObject嵌入HTML文本（兼容性最佳，生产环境首选） #

通过SVG的foreignObject标签嵌入HTML元素，直接复用HTML成熟的文本排版能力，所有现代浏览器均支持该特性，可轻松实现指定宽度自动换行、不规则形状内文本包裹等需求。

示例代码（指定宽度自动换行）：

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 文本容器背景矩形 -->
  <rect x="10" y="10" width="280" height="180" fill="#f5f5f5" stroke="#ddd" rx="4"/>
  <!-- 定义文本排版区域的位置和宽高 -->
  <foreignObject x="20" y="20" width="260" height="160">
    <!-- 嵌入HTML段落，直接用CSS控制文本样式和换行规则 -->
    <xhtml:p xmlns:xhtml="http://www.w3.org/1999/xhtml" style="margin: 0; font-size: 14px; line-height: 1.6; color: #333; word-break: break-word;">
      这是一段可以自动换行的SVG文本内容，你可以任意调整foreignObject的宽度参数，超过宽度的文本会自动折行。也可以在这里自定义字体大小、行高、对齐方式、颜色等样式，完全兼容HTML的所有文本排版特性。
    </xhtml:p>
  </foreignObject>
</svg>

如果需要在圆形等不规则SVG元素内实现文本包裹，可配合CSS的shape-outside属性定义排除区域即可。

方案2：纯SVG原生实现（无需依赖HTML） #

如果场景要求完全使用原生SVG能力、不允许嵌入HTML，可通过手动拆分文本配合tspan元素实现换行，动态场景下可通过JS计算文本宽度自动拆分。

示例代码：

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="280" height="180" fill="#f5f5f5" stroke="#ddd" rx="4"/>
  <text x="20" y="36" font-size="14" fill="#333">
    <tspan x="20" dy="0">这是纯原生SVG实现的自动换行文本，我们提前按照</tspan>
    <tspan x="20" dy="1.6em">指定的260px宽度把文本拆分成多行，用tspan</tspan>
    <tspan x="20" dy="1.6em">元素逐行渲染即可实现换行效果，适合不支持</tspan>
    <tspan x="20" dy="1.6em">foreignObject的特殊场景使用。</tspan>
  </text>
</svg>

动态实现的核心逻辑是调用SVG文本元素的getComputedTextLength()方法计算字符宽度，按指定的最大宽度逐段拆分文本，依次插入tspan元素即可。

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