Có thể đo chính xác hơn chiều cao văn bản SVG không?

Question

Tôi đang cố gắng đo chiều cao chính xác được sử dụng để hiển thị chuỗi đã cho với một phông chữ nhất định có thẻ văn bản SVG.

Tôi đã thử sử dụng getBBox và getExtentOfChar, nhưng chiều cao được trả về bởi cả hai đều bao gồm một số khoảng trống phía trên (và đôi khi bên dưới) văn bản thực tế được hiển thị.

http://upload.wikimedia.org/wikipedia/commons/3/39/Typography_Line_Terms.svg Sử dụng các thuật ngữ trong hình ảnh này, tôi đang cố gắng để có chiều cao đầu gối + chiều cao của văn bản được hiển thị. Hoặc, nếu điều đó là không thể, chỉ cần chiều cao mũ. Có cách nào tốt để tính các giá trị này không?

Dưới đây là một codepen nhanh chóng thể hiện không gian thêm tôi đang nói về: 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(' ')); 
    }); 
}); 

Tôi hiểu rằng đây là một cách công bằng phông chữ điều đặc biệt, vì vậy điều này có thể hoàn toàn không thể ...

Answer 1

Không. Tất cả các phương thức DOM SVG (getBBox(), getExtentOfChar()) được định nghĩa để trả về chiều cao toàn bộ ô của glyph. Khoảng trống lớn hơn chiều cao mũ là phụ cấp cho các hình chữ nhật cao hơn - chẳng hạn như vốn có dấu. Tôi nghĩ điều này cũng đúng với các phương thức HTML DOM.

Có, tuy nhiên, các thư viện JS xung quanh có thể được sử dụng. Ví dụ:

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

Tôi đã không được sử dụng thư viện này bản thân mình, vì vậy tôi không thể nói với bạn như thế nào đáng tin cậy hoặc chính xác nó được.