Javascript的getBBox（）提供了一个比其内容文本高的框。为什么？

我使用D3.js在SVG容器上100%地绘制一些文本

现在，我试图找出文本周围边界框的尺寸

我就是这样做的：

      var label = svgContainer.append("text")
        .attr("x", 200)
        .attr("y", 200)
        .text("100%")
        .attr("font-family", "Courier New")
        .attr("font-weight", "bold")
        .attr("font-size", "10px")
        .attr("fill", "black");
        .attr("transform", function(d){
            var bb = this.getBBox();
            console.log("bb.width = ", bb.width);
            console.log("bb.height = ", bb.height);
            return "translate(0, 0)";
          }
        );

这不仅在我的屏幕上100%地绘制字符串，而且在console.log中，它还分别输出边界框24和11.5的宽度和高度

现在我想在屏幕上可视化前面提到的边界框。因此，在上面的代码之前，我准备了以下代码：

        var rect = svgContainer.append("rect")
          .attr("x", 200)
          .attr("y", 200-11.5)
          .attr("width", 24)
          .attr("height", 11.5)
          .attr("fill", "pink");

当我运行这个修改过的代码时，我希望看到100%字符串周围有一个粉红色的边界框。但我看到的是以下内容

为什么粉红色边界框比文本高？我需要得到文本的实际边界框的尺寸，而不是比它高的东西。我该怎么做

---

这里是Plunker:

您可以直接使用边界框x和y属性。使用下面的代码

var label = self.svgContainer.append("text")
  .attr("x", 200)
  .attr("y", 200)
  .text("100%")
  .attr("font-family", "Courier New")
  .attr("font-weight", "bold")
  .attr("font-size", "10px")
  .attr("fill", "black")
  .attr("transform", function(d){
      var bb = this.getBBox();
      self.svgContainer.insert("rect","text")
        .attr("x", bb.x)
        .attr("y", bb.y)
        .attr("width", bb.width)
        .attr("height", bb.height)
        .attr("fill", "pink");
      return "translate(0, 0)";
  });

var myApp=angular.module'myApp'，[]； myApp.controller'MyController'，函数{ var self=这个； self.svgContainer=d3.selectmy_svg_小部件； 控制台，你好！； var label=self.svgContainer.appendtext .attrx，200 attry先生，200 .text100% .attrfont系列，Courier New .attr字体大小，粗体 .attr字体大小，10px .黑色 .attr转换，函数{ var bb=this.getBBox； self.svgContainer.insertrect，文本 .attrx，bb.x .attry，bb.y .宽度，bb.宽度 .身高，bb.身高 .白色，粉红色； 返回translate0，0； }; } ;

---

这里有两件事：

您仅使用边界框的“高度”和“宽度”字段。您还应该考虑边界框的x和y属性——正如@Gilsha正确指出的那样。当您调整x和y时，您会看到长方体的位置稍低： var svg=document.getElementByIdmy\u svg\u小部件； var bbox=svg.getElementByIdtest.getBBox； var rect=document.createElementshttp://www.w3.org/2000/svg，rect； rect.setAttributex，bbox.x； rect.setAttributey，bbox.y； rect.setAttributewidth，bbox.width； rect.setAttributeheight，bbox.height； rect.setAttributefill，rgba255,0,0,0.5； svg.appendChildrect； 100%

---

我使用的是getBBox中的宽度/高度，但正如我在问题和Plunker中所说明的，该宽度/高度是不正确的。请参见粉红色矩形的图像，该矩形与文本不匹配。是。关于宽度和高度配置，您是正确的。但是问题在于你设置为矩形的y属性。当你直接使用y属性并降低高度时，你没有考虑文本的字体大小。因此，您可以使用边界框x，y属性，而不是容易出错的计算。不，这是不正确的。你没看见那辆破车吗？是的，为了便于说明，我实际上硬编码了粉红色框的高度/宽度值。但是，这些硬编码的值与getBbox返回的值完全匹配。所以硬编码是不相关的！我这样做只是为了说明，这样我就可以在绘制文本之前绘制粉红色的矩形。而文本的高度明显小于11.5像素。那它为什么撒谎？是的。我明白你在这里说的，如图所示：。那么，在没有最高可能的上升和最低可能的下降的情况下，如何在使用的字形周围获得紧边界框呢？@SaqibAli在SVG中没有这样做的机制。Paul向您展示的是您所能做的最好的。这可能不适用于SVG，但对于canvas，我必须从左到右+从上到下遍历每个像素，查找第一个非alpha位，然后从下到上重复相同的内容。。。这是我唯一能弄清楚如何精确地获得精确的高度测量值的方法。显然，如果你在新闻上这样做，这会对性能产生影响。。。