如何獲取SVG文本的實際高度（不是邊界框高度）

我希望能夠計算SVG中文本（或跨度）元素佔用的實際高度。現在，我通過計算對象的邊界框的高度來達到這個目的，但它需要字體字形的高度，所以我放入該元素的任何文本都具有相同的高度，如下面的示例所示：如何獲取SVG文本的實際高度（不是邊界框高度）

var minA = document.getElementById('min-a'), 
 
    capA = document.getElementById('cap-a'), 
 
    minAHeight = document.getElementById('min-a-height'), 
 
    capAHeight = document.getElementById('cap-a-height') 
 
; 
 

 
minAHeight.innerHTML = minA.getBBox().height; 
 
capAHeight.innerHTML = capA.getBBox().height;

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 80"> 
 
    <text id="min-a" x="20" y ="20">a</text> 
 
    <text id="cap-a" x="20" y ="50">Â</text> 
 
    <text id="min-a-height" x="70" y ="20"></text> 
 
    <text id="cap-a-height" x="70" y ="50"></text> 
 
<svg>

我如何計算每個元素的實際高度是多少？

來源

2017-02-20 Fiti

有沒有API，即。你不能。 –

@RobertLongson你絕對可以 – cyberwombat

@RobertLongson發佈:) – cyberwombat

爲此，您需要加載和解析字體文件，並使用存儲在那裏的字形來計算bouding框。在服務器上，您將使用opentype.js或fontkit加載字體並獲取某些文本的邊界框。

但是，在客戶端，你需要自己解析字體文件。這對於svg字體來說很容易，但在處理二元形式（例如truetype）時會變得更加困難。
但是，當你設法做到這一點，你可以繪製glypgs的路徑，並使用瀏覽器getBBox()來計算你想要的邊界框。

那麼理論 - 但我的猜測是，它比解決自己的字體文件解析器更容易解決這個問題。

當有人知道一個，隨時編輯！

來源

2017-04-12 10:14:25 Fuzzyma

對於SVG的文本，如果你想

<svg:text #t 
    [attr.x]="xoffset" 
    [attr.y]="yoffset" 
    font-family="Courier" 
    [attr.font-size]="fontsize"> 
    {{bottom_text.toUpperCase()}} 
</svg:text>

這會給你的SVG元素中的靜態大小的字體，你可以手動設置字體大小。您還可以選擇使用瀏覽器開發工具在實際元素上「檢查元素」。選擇哪個顯示選定元素的寬度和高度。（例如參見圖片）此「懸停在」高度將包括任何與元素相關的填充，但檢查元素上列出的屬性時，它應該只包含字體高度「font-size」

來源

2017-06-21 14:54:52 azyth

@ Fuzzyma正處於正確的軌道上。你想使用OpenType.js並在瀏覽器中加載字體。

// These two match whatever you are doing in your code 
const text = 'Hello' 
const fontSize = 20 

// Load font - I find ttf work better than woff (has extra data for other calculations if needed) 
opentype.load(`/path/to/font.ttf`, (err, font) => { 

    // Actual dimensions of the text 
    const bb = font.getPath(text, 0, 0, fontSize) 

})

這會給你這可能足以滿足您的需求真正的邊框。如果你真的需要使用它來了解屏幕在文本上的位置，那麼它可能會更具挑戰性。

它的要點是你需要匹配基線。字體包含上升/下降（font.tables.hhea.asscender,font.tables.hhea.descender），一旦轉換爲em（font.tables.head.unitsPerEm * fontSize），字體大小總計達到字體大小。

有了這個武裝，你需要通過字體的每個字形，並得到yMax,yMin,xMin和xMax。使用上升/下降和Y座標來確定新的bb距離「假」邊界框（DOM返回的邊界）有多遠。左邊和右邊比較容易，除了一些奇怪的字體可以延伸到鄰居之外（邊緣情況）。

在瀏覽器之上添加每個瀏覽器的垂直偏移量......可以通過獲取SVG文本元素的y屬性（即-5）來提取 - 然後將字體大小除以一半，這個y，你有瀏覽器使用的垂直偏移量（在我們的例子中是5）。每個瀏覽器都是不同的，但是其座標反映了這一點。

來源

2017-08-11 16:15:20 cyberwombat

如何獲取SVG文本的實際高度（不是邊界框高度）

回答

相關問題