Tính chiều cao dọc của văn bản SVG

Tôi có một chuỗi các chuỗi. Nói,Tính chiều cao dọc của văn bản SVG

['Jan 11','Feb 11']

Và tôi đang tạo ra một văn bản thẳng đứng với những chuỗi như vậy

<text x="60" y="154" text-anchor="middle" style="text-anchor: middle; font: normal normal normal 12px/normal Helvetica, Arial; " font="12px Helvetica, Arial" stroke="none" fill="#ffffff" transform="rotate(90 59.75 150)"> 
<tspan>Jan 11</tspan> 
</text>

Sau svg đã được trả lại tôi thấy rằng chiều cao của văn bản là 36px. Bây giờ là có một cách để tính toán chiều cao của một văn bản sẽ được trả trước cho kích thước phông chữ?

Nguồn

2011-10-13 Scaraffe

Bạn có thể sử dụng phương pháp getBBox để tính kích thước của nút SVG.

var textNode = document.getElementsByTagName('text'), 
    bbox = textNode.getBBox(); 

//bbox now have x, y, width and height properties

Nguồn

2011-10-13 13:27:33 bjornd

Vâng. Nhưng đó là sau khi nút đã được trả lại. Tôi đã tìm kiếm một cách để tính toán chiều cao trước khi render chỉ sử dụng chuỗi mảng. – Scaraffe

Bạn có thể nối thêm nút với 'visibility =" hidden "' được chỉ định, sau đó gọi getBBox, và sau đó bỏ ẩn nó khi bạn đã thực hiện bất kỳ điều chỉnh nào bạn cần. Vì svg không sử dụng mô hình hộp CSS nên nó không ảnh hưởng đến cách bố trí của các phần tử svg khác. Nó là tốt để làm điều đó như vậy bởi vì một số tài sản trên các yếu tố văn bản có thể phụ thuộc vào bối cảnh (yếu tố cha mẹ, cascaded phong cách vv). –

Gọi getBBox() trên các nút ẩn với ném một ngoại lệ trong Firefox – sym3tri

Tính chiều cao dọc của văn bản SVG

Trả lời

Các vấn đề liên quan