È possibile misurare più accuratamente l'altezza del testo SVG?

Question

Sto provando a misurare l'altezza esatta utilizzata per il rendering di una determinata stringa con un determinato carattere con un tag di testo SVG.

Ho provato a utilizzare getBBox e getExtentOfChar, ma l'altezza restituita da entrambi include uno spazio aggiuntivo sopra (e talvolta sotto) il testo effettivamente visualizzato.

http://upload.wikimedia.org/wikipedia/commons/3/39/Typography_Line_Terms.svg Utilizzando i termini di questa immagine, sto cercando di ottenere l'altezza del cappuccio + l'altezza del discensore del testo da renderizzare. Oppure, se questo non è possibile, solo l'altezza del cappuccio. C'è un buon modo per calcolare questi valori?

Ecco un rapido codepen che mostra lo spazio extra di cui sto parlando: 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(' ')); 
    }); 
}); 

ho capito che questo è un piuttosto carattere -una cosa specifica, quindi questo potrebbe essere totalmente impossibile ...

Answer 1

No. Tutti i metodi SVG DOM (getBBox(), getExtentOfChar()) sono definiti per restituire l'altezza della cella del glifo completo. Lo spazio extra sopra l'altezza del cappuccio è un margine per i glifi più alti, come le maiuscole accentate. Penso che questo sia vero anche per i metodi HTML DOM.

Esistono tuttavia delle librerie JS che potrebbero essere utili. Per esempio:

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

Non ho usato questa libreria me stesso, quindi non posso dirvi come affidabili o accurati è.