Proper Weg zur Berechnung der Höhe und Breite eines SVG-Textes

Question

Ich muss die Höhe und Breite eines SVG-Textelements berechnen. Gibt es eine Möglichkeit, dies zu tun, ohne es tatsächlich zum DOM meiner Seite hinzuzufügen? Ich brauche nur die Maße, nicht das eigentliche Element.

Ich benutze weder d3 noch Raphael, sondern nur einfaches JavaScript. (Vielleicht sollte ich eine der früheren für meine Berechnungen verwenden?)

Was ich nachher bin, ist nur eine Funktion wie imagettfbbox in PHP, aber in plain JavaScript. Gibt es so etwas? Oder ist es einfach zu schreiben?

Da ich die Textelemente nicht benutze, erscheint es mir seltsam, sie hinzuzufügen und zu verstecken (ich habe auch irgendwo gelesen, dass Firefox Probleme mit der Berechnung der bbox von versteckten Elementen hat, Calculating vertical height of a SVG text). Aber vielleicht ist das der einzige Weg zu gehen? Muss ich in diesem Fall mit Opazität arbeiten? Zerstöre ich das Element irgendwann danach?

Answer 1

Vielleicht gibt es keinen guten Weg, genau das zu erreichen, was ich suchte. Die folgende Funktion scheint jedoch mein Ziel zu erreichen, indem ich den Teil "ohne den DOM meiner Seite tatsächlich hinzuzufügen" aufgegeben habe.

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

Edit:

Ein Hinweis auf die Berechnung der Höhe: die Höhe des bbox zurückgekehrt, dh bbox.height, ist immer die volle Höhe der Glyphe, dh a die gleiche Höhe haben als A. Und ich konnte keinen Weg finden, sie genauer zu berechnen.

Jedoch kann man die Höhe von Großbuchstaben mit Akzenten, z.B. Ä. Dies ist nur das Negative der y-Koordinate der bbox, d. H. -bbox.y.

Mit diesem kann man zum Beispiel einige Koordinaten für die vertikale Ausrichtung berechnen. Um beispielsweise das dominantBaseline-Attribut zu emulieren, das auf text-before-edge, text-after-edge und central festgelegt ist.

text-before-edge: dy = -bbox.y

text-after-edge: dy = -bbox.height -bbox.y

central: dy = -bbox.y -bbox.height/2

Wo dy die vertikale Verschiebung ist. Dies kann verwendet werden, um Einschränkungen einiger Anwendungen zu umgehen, die diese von Attributen festgelegten Alignments nicht unterstützen.