Modo corretto per calcolare l'altezza e la larghezza di un testo SVG

Question

Ho bisogno di calcolare l'altezza e la larghezza di un elemento di testo svg. C'è un modo per farlo senza realmente aggiungerlo al DOM della mia pagina? Ho bisogno solo delle misure, non l'elemento reale.

Non sto usando né d3 né Raphael, ma solo JavaScript semplice. (Forse dovrei usare uno dei primi per i miei calcoli?)

Quello che sto dopo è solo una funzione come imagettfbbox in PHP, ma in semplice JavaScript. C'è una cosa del genere? O è facile da scrivere?

Poiché non sto effettivamente utilizzando gli elementi di testo mi sembra strano aggiungerli e nasconderli (ho anche letto da qualche parte che Firefox ha problemi con il calcolo del bbox di elementi nascosti, Calculating vertical height of a SVG text). Ma forse questo è l'unico modo per andare? Dovrò lavorare con l'opacità in quel caso? Devo distruggere l'elemento in qualche modo in seguito?

Answer 1

Forse non c'è un buon modo per ottenere esattamente quello che cercavo. Tuttavia, rinunciando alla parte "senza aggiungerla effettivamente al DOM della mia pagina", la seguente funzione sembra raggiungere il mio obiettivo.

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:

Una nota sul calcolo dell'altezza: l'altezza della Bbox restituito, cioè bbox.height, è sempre l'intera altezza del glifo, vale a dire a avranno la stessa altezza come A. E non sono riuscito a trovare un modo per calcolarli più esattamente.

Tuttavia, è possibile calcolare l'altezza dei caratteri accentati maiuscoli, ad es. Ä. Questo sarà solo il negativo della coordinata y della bbox, ovvero -bbox.y.

Utilizzando questo si può calcolare, ad esempio, alcune coordinate per l'allineamento verticale. Ad esempio, per emulare l'attributo dominantBaseline impostato su text-before-edge, text-after-edge e central.

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

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

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

Dove dy è la traslazione verticale. Questo può essere utilizzato per aggirare i limiti di alcune applicazioni che non supportano questi allineamenti impostati dagli attributi.