如何为没有异物的svg文本tspan设置背景颜色？ [复制]

【问题标题】：How to set background color for svg text tspan without foreign object? [duplicate]如何为没有异物的svg文本tspan设置背景颜色？ [复制]
【发布时间】：2014-11-01 05:58:00
【问题描述】：

这是我的代码，如何设置 attr("background-color","red")

var datacollection = stackmap.append("text")
.attr("x", 40)
.attr("y", 50)
.attr("fill", "#8b8b8b")
.attr("font", "14px segoe ui")
.append("tspan")
.text("*content  :  Oh My God " + window.year);

【问题讨论】：

标签： javascript svg d3.js

【解决方案1】：

svg text 元素没有“背景”的概念，您只能设置实际文本本身的样式。如果你想要一个背景，你需要单独添加它，例如，一个 svg rect 元素：

stackmap.append("rect")
    .attr({
      "class": "background",
      x: 40,
      y: 50,
      width: 100,
      height: 100
    })
    .style("fill", "red");
stackmap.append("text")
    ..etc

【讨论】：

你会如何根据文本的大小调整矩形的大小？
@hofnarwillie 您可以使用 domElemen.getClientRects() 获取代表文本周围框的矩形。