用矩形为 SVG 文本提供背景答案

【问题标题】：Giving SVG text a background with rect用矩形为 SVG 文本提供背景
【发布时间】：2018-01-29 09:22:51
【问题描述】：

我知道以前在这里有人问过这个问题，但我遇到了一个非常奇怪的问题......

我正在尝试为任意大小的文本提供彩色背景。我正在做的是：创建文本，计算文本的坐标和尺寸，然后创建一个具有相同尺寸和坐标的矩形，确保它插入到文本之前，这样它就不会覆盖它。所有这些我都使用 d3。

问题在于，有时矩形有点太细了，所以有些文字会突出到末尾（奇怪的是，以“s”结尾的单词似乎是主要的违规者）。矩形的垂直位置也有点太高，所以顶部有一些空白空间，任何“悬空”字母（如 g、p 等）都会在矩形下方延伸。

见下图：

这是我正在使用的代码：

let textContainer = self.svg.append("g")
    .attr("id", "textContainer");

textContainer.append("text")
    .attr("x", xcoordinate)
    .attr("y", ycoordinate)
    .attr("text-anchor", "middle")
    .text(text);

let bBox = (textContainer.node() as any).getBBox();
textContainer.insert("rect", "#textContainer text")
    .attr("width", bBox.width)
    .attr("height", bBox.height)
    .attr("x", bBox.x)
    .attr("y", bBox.y)
    .attr("fill", "gray");

为什么会出现这个问题？

【问题讨论】：

我希望这个链接可以帮助你，link
您的文本节点似乎应用了一些 CSS，与 this example 相比，您似乎在顶部和左侧应用了边距，使您的文本略微移出矩形。
你有一个可以证明这个问题的小提琴吗？
@Gilsha 这稍微证明了这一点，尽管由于某种原因没有那么严重：jsfiddle.net/1fqL50xp 我知道 viewBox 为“0 0 2 2”有点不寻常，但我认为这应该不会影响事物，因为 S 代表“可扩展”。 :)
向 Chrome 报告的错误：bugs.chromium.org/p/chromium/issues/detail?id=757436 请注意，text-anchor="middle" 会使错误变得更糟。如果你不需要，你会得到一个更准确的盒子。

标签： javascript html typescript d3.js svg

【解决方案1】：

问题似乎在于矩形的 x 和 y 位置的计算。当它相对于视图框内的文本时，会出现轻微的计算错误。

但是，您可以通过将 x 和 y 位置属性移动到容器组元素来解决此问题，如下所示。

let textContainer = d3.select("svg").append("g").attr("id", "textContainer");

textContainer.attr("transform","translate(1,1)"); //Apply position coordinates here 

textContainer.append("text")
  .attr("x",0) //Sets to 0
  .attr("y",0) //Sets to 0
  .attr("text-anchor", "middle")
  .attr("font-size", 0.5)
  .text("Test");

let bBox = textContainer.node().getBBox();
textContainer.insert("rect", "#textContainer text")
  .attr("width", bBox.width)
  .attr("height", bBox.height)
  .attr("x", bBox.x)
  .attr("y", bBox.y)
  .attr("fill", "gray");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="600" height="600" style="border: 1px solid black" viewBox="0 0 2 2">
</svg>

不过，这并不是一个完美的解决方案。

【讨论】：