如何实现SVG中矩形对应文本（text）的可编辑功能？

首先明确：SVG的<text>元素本身不支持contenteditable="true"属性——这是HTML元素专属属性，直接添加必然无效。以下是两种可行的实现方案：

方案一：双击文本触发编辑（推荐） #

监听文本的双击事件，动态创建HTML输入框覆盖在SVG文本位置，编辑完成（失去焦点或按回车）后将内容替换回SVG文本并移除输入框。结合你的D3代码，修改如下：

// 示例标签数据，对应四个矩形
const labels = ["标签1", "标签2", "标签3", "标签4"];

// 批量创建包含矩形和文本的组
const groups = svg.selectAll("g.rect-group")
  .data(labels)
  .enter()
  .append("g")
  .attr("class", "rect-group");

// 绘制矩形
groups.append("rect")
  .attr("width", 100)
  .attr("height", 50)
  .attr("x", (d, i) => i * 120)
  .attr("y", 50)
  .style("fill", "#f0f0f0")
  .style("stroke", "#333");

// 绘制可编辑文本
const textElements = groups.append("text")
  .attr("x", (d, i) => i * 120 + 50)
  .attr("y", 75)
  .attr("text-anchor", "middle")
  .text(d => d)
  .style("cursor", "pointer");

// 添加双击编辑逻辑
textElements.on("dblclick", function(event, d) {
  const textEl = d3.select(this);
  const bbox = this.getBBox();
  const svgRect = event.target.ownerSVGElement.getBoundingClientRect();
  
  // 创建输入框并定位
  const input = d3.select("body").append("input")
    .attr("type", "text")
    .attr("value", d)
    .style("position", "absolute")
    .style("left", `${bbox.x + svgRect.left}px`)
    .style("top", `${bbox.y + svgRect.top}px`)
    .style("width", `${bbox.width}px`)
    .style("font-size", "16px")
    .node();

  // 自动选中输入内容
  input.select();

  // 完成编辑的逻辑
  const finishEdit = () => {
    const newValue = input.value.trim() || d;
    textEl.text(newValue);
    // 同步更新绑定的数据（如果需要数据联动）
    textEl.datum(newValue);
    input.remove();
  };

  input.addEventListener("blur", finishEdit);
  input.addEventListener("keydown", (e) => {
    if (e.key === "Enter") finishEdit();
  });
});

方案二：用<foreignObject>嵌入HTML输入框 #

在SVG内部直接嵌入HTML输入框，适合需要常驻编辑入口的场景，但需注意布局适配：

groups.append("foreignObject")
  .attr("x", (d, i) => i * 120 + 10)
  .attr("y", 55)
  .attr("width", 80)
  .attr("height", 30)
  .append("xhtml:body")
  .style("margin", 0)
  .append("input")
  .attr("type", "text")
  .attr("value", d => d)
  .style("width", "100%")
  .style("height", "100%")
  .style("border", "none")
  .style("background", "transparent")
  .style("text-align", "center")
  .on("input", function() {
    // 可在这里同步更新关联数据或其他元素
    console.log("当前编辑值:", this.value);
  });

关键注意点 #

• SVG与HTML属于不同命名空间，不能直接混用HTML属性；
• 方案一中的输入框定位需结合SVG在页面中的绝对位置，避免偏移；
• 若使用D3数据绑定，编辑完成后记得同步更新绑定数据，保证视图与数据一致性。

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