为SVG文本提供rect

Question

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

我试图给任意大小的文字添加彩色背景。我正在做的是：创建文本，计算文本的坐标和尺寸，然后创建一个具有相同尺寸和坐标的矩形，确保它在文本之前插入，因此它不会覆盖它起来。我正在使用d3进行所有这些。

问题在于，有时矩形略微太薄，所以有些文字伸出结尾（以＆＃34; s＆＃34结尾的单词;似乎是主要的攻击者，奇怪） 。矩形的垂直位置也略高，所以顶部有一些空白区域，任何＆＃34;悬垂＆＃34;像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");

为什么会出现这个问题？

Answer 1

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

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

＆＃13;

＆＃13;

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");

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

尽管如此，这还不是一个完美的解决方案。