正确的方法来计算SVG文本的高度和宽度

Question

我需要计算svg文本元素的高度和宽度。有没有办法在没有实际添加到我的页面的DOM的情况下这样做？我只需要措施而不是实际元素。

我既不使用d3也不使用Raphael，而只使用普通的JavaScript。 （也许我应该使用前者之一进行计算？）

我所追求的只是PHP中的imagettfbbox函数，但是在纯JavaScript中。有这样的事吗？或者写起来容易吗？

由于我实际上并没有使用文本元素，所以添加它们并隐藏它们似乎很奇怪（我也读过Firefox在计算隐藏元素的bbox时遇到问题，Calculating vertical height of a SVG text）。但也许这是唯一的出路？在这种情况下，我是否必须使用不透明度？之后我会以某种方式破坏元素吗？

Answer 1

也许没有什么好方法可以实现我的目标。但是，放弃＆＃34;而不实际将其添加到我的页面的DOM＆＃34;部分，以下功能似乎达到了我的目标。

function bboxText( svgDocument, string ) {
    var data = svgDocument.createTextNode( string );

    var svgElement = svgDocument.createElementNS( svgns, "text" );
    svgElement.appendChild(data);

    svgDocument.documentElement.appendChild( svgElement );

    var bbox = svgElement.getBBox();

    svgElement.parentNode.removeChild(svgElement);

    return bbox;
}

修改

关于高度计算的注释：返回的bbox的高度，即bbox.height，始终是字形的完整高度，即a将与{{1}具有相同的高度}}。我找不到更精确计算它们的方法。

但是，可以计算大写重音字符的高度，例如A。这只是bbox的y坐标的负数，即Ä。

使用这个可以计算，例如，垂直对齐的一些坐标。例如，要将-bbox.y属性设置为dominantBaseline，text-before-edge和text-after-edge。

central：text-before-edge

dy = -bbox.y：text-after-edge

dy = -bbox.height -bbox.y：central

dy = -bbox.y -bbox.height/2是垂直翻译。这可用于解决某些不支持属性设置的对齐的应用程序的限制。

Answer 2

我在VB.Net中遇到了类似的问题！

我编写了一个VB.Net程序，该程序生成SVG文件，并且需要计算文本的宽度以计算下一个竖线位置，如下图所示。

在计算A线元素的最大文本宽度时，将B线竖线定位。

要在Console VB.Net应用程序中做到这一点，我执行以下代码行

Private Sub WriteTextInfo(sInfo As String)

    If sInfo <> "" Then
        'display Text in SVG file
        sw.WriteLine("<text x ='" & (xPos + 10) & "' y='" & yPos & "' fill='black' font-family='Arial' font-size='20'>" & sInfo & "</text>")

        'Create Font object as defined in <text> SVG tag 
        Dim font As New Font("Arial", 20.0F)
        'Compute width of text in pixels
        Dim xSize = TextRenderer.MeasureText(sInfo, font)
        'Divide pixels witdh by a factor 1.4 to obtain SVG width !
        Dim iWidth As Decimal = Math.Truncate(CDec(xSize.Width) / 1.4)

        'If new vertical position is greater than old vertical position
        If xPos + iWidth > xPosMax Then
            xPosMax = xPos + iWidth
        End If
    End If
End Sub

在简历中，我使用TextRenderer.MeasureText()函数以像素为单位计算文本的宽度，然后将该数字除以1.4得到SVG宽度。

1.4值是相对于我的情况通过实验获得的！

要使用TextRendered和Font对象，我添加了对

的引用

System.Drawing
System.Windows.Forms

如您所见，我没有使用任何DOM方法来计算文本的宽度，因为我是在VB.Net程序中进行计算的。