Làm thế nào để bạn có được các từ để bọc bên trong một hộp trong RaphaelJS? Hoặc trong SVG dựa trên trình duyệt nói chung?Từ Bọc trong Raphael JS/SVG
Tôi tìm thấy this thread trên đó, nhưng nó không có ý nghĩa gì cả. Họ nói để sử dụng "widthToCharNum" nhưng theo như tôi có thể nói, chủ đề này là nơi duy nhất những từ đó đã từng được sử dụng trên internet. Họ đề xuất sử dụng thuộc tính "chiều rộng", nhưng điều này không có hiệu lực.
Gói văn bản không phải là được tích hợp vào Thông số Raphael hoặc SVG. Giai đoạn. Đến từ thế giới HTML, tôi thấy sự vắng mặt của văn bản gói khá gây sốc.
Tuy nhiên, bạn có thể tự làm mà không gặp quá nhiều khó khăn. Xem this question để biết chi tiết và ví dụ. Thật không may, bạn phải ghi một số chu kỳ phía máy khách để làm cho nó hoạt động tự động.
Thẻ tspan có thể mang đến ảo tưởng về việc quấn từ, nhưng không có chức năng bọc từ được tích hợp sẵn.
Thẻ tspan giống với thẻ văn bản nhưng có thể được lồng trong thẻ văn bản và bên trong thẻ văn bản. Cùng với thuộc tính 'dy', điều này cho phép ảo tưởng về bọc từ trong SVG 1.1. Lưu ý rằng 'dy' có liên quan đến glyph (ký tự) cuối cùng được vẽ. Có một hướng dẫn về cách sử dụng tspan tại http://tutorials.jenkov.com/svg/text-element.html.
Bài viết tại http://www.xml.com/pub/a/2002/09/11/quint.html cũng có thể hữu ích.
Thư viện svg.js có plugin svg.textflow.js. Nó không phải là cực nhanh nhưng nó thực hiện các trick. Nó thậm chí lưu trữ văn bản tràn trong thuộc tính dữ liệu để bạn có thể sử dụng nó để tạo cột liên tục. Here the text flow example page.
Ví dụ này trông tuyệt vời, nhưng thư viện dường như không còn tồn tại nữa ... Tôi đã gửi một thông điệp đến để xem liệu anh ấy có thể làm rõ điều gì đang xảy ra với điều này không, vì nó trông đầy hứa hẹn! – Siyfion
Tôi biết bây giờ nó hơi muộn, nhưng bạn có thể quan tâm đến dự án Raphael-paragraph của tôi.
Đây là thư viện nhỏ cho phép bạn tạo văn bản nhiều dòng được tự động bao gồm các giới hạn chiều rộng và chiều cao tối đa, chiều cao dòng và cấu hình kiểu văn bản. Nó vẫn khá beta-ish và đòi hỏi rất nhiều tối ưu hóa, nhưng nó sẽ làm việc cho các mục đích của bạn.
Ví dụ sử dụng và tài liệu được cung cấp trên trang GitHub.
Tôi không thấy 'dy' được đề cập ở bất kỳ nơi nào trong số này. Nó là gì? –