nhận được chiều rộng văn bản trong SVG trước khi render

Question

Tôi muốn đặt một hình chữ nhật quanh một văn bản trong SVG. Chiều cao của văn bản được biết đến với tôi (các font-size thuộc tính của phần tử text). Nhưng chiều rộng phụ thuộc vào nội dung thực tế. Sử dụng getBBox() hoặc getComputedTextLength() sẽ hoạt động. Nhưng điều này chỉ hoạt động sau khi hiển thị.

Có cách nào để xác định rằng một cách khác? Ví dụ định x và width thuộc tính tương ứng với các giá trị khác? Tôi đã không tìm thấy bất cứ điều gì như thế trong SVG Spec.

Answer 1

Xác định nơi văn bản kết thúc có thể yêu cầu khoảng cùng một đường dẫn mã cơ bản như bản thân hiển thị - trải qua chiều rộng của mỗi ký tự dựa trên phông chữ và kiểu, v.v. Vì tôi không biết tiêu chuẩn SVG xác định phương pháp trực tiếp nhận được thông tin này mà không làm rendering đầy đủ thực tế, cho đến các phương pháp như vậy xuất hiện hoặc được báo cáo ở đây bởi những người khác, cách tiếp cận nên để render vô hình trước khi thực hiện vẽ thực tế.

Bạn có thể làm điều đó trong một lớp ẩn (z-index, opacity và các công cụ) hoặc ngoài cửa sổ xem có thể nhìn thấy, bất cứ hoạt động tốt nhất trong thử nghiệm. Bạn chỉ cần làm cho trình duyệt thực hiện hiển thị để tìm hiểu, vì vậy bạn hiển thị vô hình vì mục đích đó, sau đó sử dụng getComputedTextLength()