如何限制SVG文本内容不超出矩形范围？

嗨，别担心，新手遇到SVG的这个小坑太正常啦！确实，SVG里的<rect>元素不能直接嵌套文本，但咱们有好几种实用的办法来解决这个问题，我结合你的D3代码给你详细讲讲：

方法一：用文本属性+自动换行控制范围 #

这是最常用的方式，咱们可以利用D3给文本设置对齐方式，再加上一个简单的自动换行函数，让文本自动适配矩形的大小，不会超出范围。

先补全你的代码示例（假设矩形宽高为100和50，你可以根据自己的需求调整）：

const rectWidth = 100;
const rectHeight = 50;

// 你的原有代码：创建节点组
var node = svg.append("g").selectAll(".node")
  .data(nodes)
  .enter().append("g")
  .attr("class", function(d){ 
    return ["node ", d.name.replace(/ /g,"-")].join(" "); 
  })
  .attr("transform", function(d) { 
    return "translate(" + d.x + "," + d.y + ")"; 
  });

// 追加矩形
node.append("rect")
  .attr("width", rectWidth)
  .attr("height", rectHeight)
  .attr("fill", "#f0f0f0") // 加个底色方便查看
  .attr("stroke", "#333");

// 追加文本并调用换行函数
node.append("text")
  .attr("text-anchor", "middle") // 文本水平居中
  .attr("dominant-baseline", "middle") // 文本垂直居中
  .attr("x", rectWidth / 2)
  .attr("y", rectHeight / 2)
  .attr("font-size", "14px")
  .text(d => d.name)
  .call(wrap, rectWidth); // 调用自动换行函数

// 自定义的文本自动换行函数
function wrap(text, width) {
  text.each(function() {
    const textElement = d3.select(this);
    const words = textElement.text().split(/\s+/).reverse();
    let word;
    let line = [];
    let lineNumber = 0;
    const lineHeight = 1.2; // 行高倍数，可调整
    const y = textElement.attr("y");
    const dy = parseFloat(textElement.attr("dy") || 0);
    
    // 创建第一个tspan元素
    let tspan = textElement.text(null).append("tspan")
      .attr("x", rectWidth / 2)
      .attr("y", y)
      .attr("dy", dy + "em");
    
    while (word = words.pop()) {
      line.push(word);
      tspan.text(line.join(" "));
      // 如果当前行宽度超过矩形宽度，就换行
      if (tspan.node().getComputedTextLength() > width) {
        line.pop();
        tspan.text(line.join(" "));
        line = [word];
        tspan = textElement.append("tspan")
          .attr("x", rectWidth / 2)
          .attr("y", y)
          .attr("dy", ++lineNumber * lineHeight + dy + "em")
          .text(word);
      }
    }
  });
}

如果你的文本比较短，也可以不用自动换行，直接设置overflow: hidden来隐藏超出部分，要是想加省略号，也可以结合text-overflow属性做简单处理。

方法二：用裁剪路径(clipPath)隐藏超出部分 #

如果你不需要换行，只想把超出矩形的文本直接隐藏，可以用SVG的裁剪路径功能：

const rectWidth = 100;
const rectHeight = 50;

// 先在SVG的defs里定义裁剪路径
svg.append("defs")
  .append("clipPath")
  .attr("id", "textClip")
  .append("rect")
  .attr("width", rectWidth)
  .attr("height", rectHeight);

// 你的原有节点组代码不变
var node = svg.append("g").selectAll(".node")
  .data(nodes)
  .enter().append("g")
  .attr("class", function(d){ 
    return ["node ", d.name.replace(/ /g,"-")].join(" "); 
  })
  .attr("transform", function(d) { 
    return "translate(" + d.x + "," + d.y + ")"; 
  });

// 追加矩形
node.append("rect")
  .attr("width", rectWidth)
  .attr("height", rectHeight)
  .attr("fill", "#f0f0f0")
  .attr("stroke", "#333");

// 追加文本并应用裁剪路径
node.append("text")
  .attr("clip-path", "url(#textClip)") // 引用裁剪路径
  .attr("text-anchor", "middle")
  .attr("dominant-baseline", "middle")
  .attr("x", rectWidth / 2)
  .attr("y", rectHeight / 2)
  .attr("font-size", "14px")
  .text(d => d.name);

这个方法会把所有超出矩形范围的文本直接剪掉，适合短文本场景。

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