如何让createElementNS创建的SVG text文本实现换行？

SVG的<text>元素和HTML文本渲染逻辑不同，直接用\n或者<br>标签行不通，而且SVG元素不支持innerHTML插入HTML标签（因为SVG基于XML而非HTML）。下面给你两种可靠的实现方式：

方法一：用<tspan>元素拆分文本 #

这是SVG实现多行文本的标准方案，通过为每一行创建独立的<tspan>子元素，控制位置实现换行：

const svgNS = "http://www.w3.org/2000/svg";
// 创建主text元素
const text = document.createElementNS(svgNS, "text");
text.setAttribute("x", "50");
text.setAttribute("y", "50");
text.setAttribute("font-size", "16");

// 拆分需要换行的文本内容
const textLines = ["some very long text", "second line content", "third line here"];

textLines.forEach((line, index) => {
  const tspan = document.createElementNS(svgNS, "tspan");
  tspan.textContent = line;
  // 保持每行x坐标与主text一致，避免偏移
  tspan.setAttribute("x", text.getAttribute("x"));
  // 第一行不偏移，后续行设置行间距（这里用1.2em作为行高）
  tspan.setAttribute("dy", index === 0 ? "0" : "1.2em");
  text.appendChild(tspan);
});

// 将text元素添加到SVG容器中
document.querySelector("svg").appendChild(text);

这种方式的优势是可以单独控制每一行的样式（比如颜色、字号）和位置，适合需要定制化的场景。

方法二：利用CSS white-space属性让\n生效 #

如果不需要单独控制每一行，只想让文本按\n换行，可以给text元素设置white-space属性，让SVG识别文本中的换行符：

const svgNS = "http://www.w3.org/2000/svg";
const text = document.createElementNS(svgNS, "text");
text.setAttribute("x", "50");
text.setAttribute("y", "50");
text.setAttribute("font-size", "16");
// 设置white-space属性，使换行符生效
text.style.whiteSpace = "pre-wrap";
// 直接在textContent中加入\n实现换行
text.textContent = "some very long text\nsecond line\nthird line content";

document.querySelector("svg").appendChild(text);

pre-wrap会保留换行符，同时自动换行超出容器的文本；pre严格按照文本中的换行和空格渲染，但不会自动换行；pre-line保留换行符、忽略多余空格且自动换行，可根据需求选择。

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