Ist es möglich, die SVG-Texthöhe genauer zu messen?

Question

Ich versuche, die genaue Höhe zu messen, die verwendet wird, um eine gegebene Zeichenfolge mit einer gegebenen Schriftart mit einem SVG-Text-Tag zu rendern.

Ich habe versucht mit getBBox und getExtentOfChar, aber die Höhe von beiden zurückgegebenen enthält etwas mehr Platz oberhalb (und manchmal unter) der tatsächlichen Text gerendert.

http://upload.wikimedia.org/wikipedia/commons/3/39/Typography_Line_Terms.svg Mit den Begriffen in diesem Bild versuche ich, entweder die Höhe der Kappe und die Unterlänge des gerenderten Textes zu erhalten. Oder, wenn das nicht möglich ist, nur die Kappenhöhe. Gibt es eine gute Möglichkeit, diese Werte zu berechnen?

Hier ist ein schnellen codepen den zusätzlichen Platz zeigen, ich spreche: http://codepen.io/pcorey/pen/amkGl

HTML:

<div> 
    <svg><text>Hello</text></svg> 
    <svg><text>Age</text></svg> 
</div> 

JS:

$(function() { 
    $('svg').each(function() { 
    var svg = $(this); 
    var text = svg.find('text'); 

    var bbox = text.get(0).getBBox(); 
    svg.get(0).setAttribute('viewBox', 
          [bbox.x, 
          bbox.y, 
          bbox.width, 
          bbox.height].join(' ')); 
    }); 
}); 

Ich verstehe, dass dies eine ziemlich Schriftart -spezifische Sache, so könnte dies völlig unmöglich sein ...

Answer 1

Nein. Alle SVG-DOM-Methoden (getBBox(), getExtentOfChar()) sind so definiert, dass sie die Höhe der vollen Glyphenzelle zurückgeben. Dieser zusätzliche Platz über der Kappenhöhe ist für größere Glyphen - wie z. B. akzentuierte Großbuchstaben - zulässig. Ich denke, das gilt auch für HTML-DOM-Methoden.

Es gibt jedoch JS-Bibliotheken, die möglicherweise von Nutzen sind. Zum Beispiel:

https://github.com/Pomax/fontmetrics.js

Ich habe diese Bibliothek selbst nicht verwendet, so kann ich Ihnen nicht sagen, wie zuverlässig oder genau es ist.