Bir SVG metninin yüksekliğini ve genişliğini hesaplamanın doğru yolu

Question

Bir svg metin öğesinin yüksekliğini ve genişliğini hesaplamam gerekiyor. Bunu, sayfamın DOM'una eklemeden bir yolu var mı? Sadece asıl unsurdan değil, sadece önlemlere ihtiyacım var.

Ne d3 ne de Raphael'i kullanıyorum, sadece sade JavaScript. (Belki de hesaplamalarım için eskilerden birini kullanmalıyım?)

Şu andan sonra, PHP'de imagettfbbox gibi bir işlev, ancak düz JavaScript'te. Böyle bir şey var mı? Ya da yazması kolay mı?

Metin öğelerini kullanmadığımdan, onları eklemek ve gizlemek benim için garip görünüyor (Firefox'un gizli öğelerin bbox'ını hesaplamakla ilgili bir problemi de okudum (Calculating vertical height of a SVG text)). Ama belki bu gitmek için tek yoldur? Bu durumda opaklıkla çalışmam gerekecek mi? Öğeyi sonradan yok eder miyim?

Answer 1

Belki de tam olarak neyin peşinde olduğumu başarmanın iyi bir yolu yoktur. Ancak, "sayfamın DOM'sine gerçekten eklemeden" bölümünden vazgeçerek, aşağıdaki işlev hedefime ulaşıyor gibi görünüyor.

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

Düzenleme:

yüksekliğinin hesaplanması ilgili bir not: BBOX yüksekliği döndü yani bbox.height Glifin her zaman tam yüksekliğidir, yani a aynı yüksekliğe sahip olacak A olarak. Ve onları daha tam olarak hesaplamanın bir yolunu bulamadım. Bununla birlikte, bir kişi büyük harfli vurgulu karakterlerin yüksekliğini hesaplayabilir, örn. Ä. Bu, yalnızca bbox'ın y koordinatının, yani -bbox.y'un negatifidir.

Bunu kullanarak, örneğin dikey hizalama için bazı koordinatlar hesaplanabilir. Örneğin, özniteliğini text-before-edge, text-after-edge ve central olarak ayarlamak için kullanın.

text-before-edge

: dy = -bbox.y

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

central: dy = -bbox.y -bbox.height/2dy dikey çeviri olduğunu

. Bu, özellikler tarafından belirlenen bu hizalamaları desteklemeyen bazı uygulamaların sınırlamalarını almak için kullanılabilir.