SVG文本元素内容溢出时，读取仅返回可见片段的问题排查

你遇到的核心问题是：当SVG文本因容器尺寸过小发生溢出时，生成SVG的工具通常会把文本拆分成多个<tspan>元素（对应每一行可见文本），甚至直接截断超出容器的内容。而你当前的代码只读取了部分文本节点，所以只能拿到可见的片段。

从你给出的SVG示例来看，文本元素里的内容本身就是被拆分后的可见部分，而你提到的完整元数据（name:Peristyle_5-top:162-left:1349-width:50-height:75）并没有实际存储在文本元素中——这大概率是生成SVG的工具只保留了可见文本，丢弃了超出的部分，或者你选错了元数据的存储位置。

下面给你两个可行的解决方案：

方案1：用自定义数据属性存储完整元数据（推荐） #

把tile的完整信息放在SVG元素的data-*自定义属性里，这是存储元数据的标准做法，完全不受文本溢出的影响。

修改你的SVG代码，给目标组添加自定义属性：

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="75" viewBox="0 0 50 75">
  <title>Peristyle_5</title>
  <g id="Peristyle_5" data-tile-info="name:Peristyle_5-top:162-left:1349-width:50-height:75">
    <g>
      <rect id="background-2" data-name="background" width="50" height="75" fill="#7facc7"/>
    </g>
    <text transform="translate(9.726 21.76)" font-size="15" font-family="OperatorMonoSSm-Book, Operator Mono SSm">nam<tspan x="0" y="18">e:P</tspan><tspan x="0" y="36">eri</tspan></text>
  </g>
</svg>

然后用SVG.js直接读取这个属性：

const theTile = // 你的目标组元素
const fullTileInfo = theTile.attr('data-tile-info');
// fullTileInfo就是你需要的完整内容

方案2：拼接文本元素的所有子节点内容 #

如果完整文本确实存在于<text>和它的子<tspan>中（只是部分被溢出隐藏），你可以遍历所有文本节点拼接内容：

const textNode = theTile.select('text');
let fullText = '';

// 遍历每个text元素
textNode.each(function() {
  // 先拿到text元素本身的文本
  fullText += this.textContent;
  // 再遍历所有tspan子元素，拼接它们的文本
  this.children('tspan').each(function() {
    fullText += this.textContent;
  });
});

console.log(fullText); // 输出所有文本的拼接结果

或者更简洁的方式，SVG.js的text()方法会自动拼接当前元素及其所有子元素的文本：

const textNode = theTile.select('text');
const fullText = textNode.text();

注意：这种方式只能拿到SVG中实际存在的文本，如果生成SVG时已经截断了内容，那还是拿不到原始的完整信息，这时候方案1才是更可靠的选择。

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