ブラウザのテキストの境界ボックスを再現

Question

ブラウザでSVGを使用する場合、ブラウザにはgetBBoxという機能があり、さまざまな要素のバウンディングボックスを提供します。しかし、テキスト要素について言えば、このブーディングボックスがどのように計算されるかは本当に混乱していました。 私はフォントサイズがフォントファイルで指定されているem-Boxに基づいていることを知っています。テキストのバウンディングボックスの高さの秘密は何か

fontSize != bbox-height 
(ascender-descender)/unitsPerEm * fontSize != bbox-height 
(unitsPerEm-descender)/unitsPerEm * fontSize != bbox-height 
...maybe adding a fixed amount to ascender for accents? Like Ć 

だから、：私のテストは、これらのどれもが（フォントサイズ1000年にわずか数PXが異なる）、FFやChromeと同じ結果を生成しないことを示しているが ブラウザ？コメントへの返信：

私もFFとChromeのソースコードに見えますが、算定の基礎と右の場所を見つけることは、自身の

// EDIT上の課題であることを試みた 私はブラウザで行われたようにsvgテキストのbboxを計算したい（振る舞いを複製する）。私は正確にbboxを計算するのに必要なフォントのメトリックを知っている必要があります（幅と高さは十分です）

Answer 1

私は可能な解決策を見つけました少なくとも、テキストのbboxの寸法のクロムの挙動を説明すること。私はfontfileをロードし、解析するNPMパッケージfontkitを使用するすべての

にBBox身長

まず。

• font.ascent
• font.descent
• font.lineGap
• font.unitsPerEmを

そうに： fontkitは、全体でのフォントのためにあなたにいくつかの指標を与えますbboxの高さを計算する次のように計算した：

bboxHeight = (font.ascent - font.descent + font.lineGap)/unitsPerEm * fontSize 

しかし、emボックス（font.ascent - font.descent > unitsPerEm）より大きいフォントを持つとエラーが発生します。この特殊なケースでは、bboxHeightはfont.ascent - font.descentです。私はfontkitのlayout機能を利用したテキストの幅を計算する

var fontHeight = font.ascent - font.descent 
var lineHeight = fontHeight > font.unitsPerEm ? fontHeight : fontHeight + font.lineGap 
var height = lineHeight/font.unitsPerEm * fontSize 

---

にBBox幅

：高さのために、次のコードにつながる

。 layoutを使用すると、テキストを描画するグリフやグリフのメトリックにアクセスすることができます。我々が必要とするメトリックはadvanceWidthであり、現在のglpyhの隣の他のグリフへのマージンを含んでいます。すべてadvanceWidth Sをアップsummmingし、それに応じてそれらをスケーリングすることによって、私はbboxWidthになってしまった：

var width = font.layout(text).glyphs.reduce((last, curr) => last + curr.advanceWidth, 0) 
width = width/font.unitsPerEm * fontSize 

---

にBBox y位置

トラブルここでは、我々はまだのy位置を計算する必要が停止しませんbbox。ザッツはなく、単純な式：yはあなただけの図あなたのDOM（yとdy属性）

---

にBBox位置x

ザッツから引き上げる理論上の位置である

var bboxY = y-font.ascent/font.unitsPerEm * fontSize 

ドームから引き出します（xとdx）

---

ボックス全体：

var box = { 
    x:x, 
    y: y-font.ascent/font.unitsPerEm * fontSize, 
    width: width 
    height: height 
} 

---

、それは他の誰かに役立ちます願っています！