Làm việc với văn bản trong đồ họa vectơ có thể mở rộng (SVG)
Trong các bài viết trước của chúng tôi, chúng tôi đã sử dụng SVG để tạo hình. Trong bài đăng này, như tiêu đề đã nói, chúng tôi sẽ xem xét tạo văn bản với SVG. Có rất nhiều điều chúng ta có thể làm với văn bản ngoài những gì văn bản HTML đơn giản có khả năng thực hiện.
Vì vậy, hãy kiểm tra chúng.
Thực hiện cơ bản
Nhưng, trước khi chúng ta đi xa hơn, hãy xem cách Văn bản trong SVG được hình thành ở cấp độ rất cơ bản của nó:
Văn bản trong SVG, như bạn có thể thấy từ đoạn mã trên, được xác định bằng một thẻ đủ logic, x và y các thuộc tính để xác định tọa độ đường cơ sở.
Nguồn hình ảnh: Wikipedia.org
Và đây là cách văn bản sẽ như thế nào. Cho đến nay, dường như nó không có gì khác biệt với văn bản thông thường trong HTML.
Kiểu văn bản cơ bản
Văn bản cũng có thể được tạo kiểu với các thuộc tính CSS như trọng lượng phông chữ, kiểu chữ, và trang trí văn bản có thể được thực hiện thông qua phong cách nội tuyến, phong cách nội bộ hoặc là phong cách bên ngoài như chúng ta đã thảo luận trong bài trước về Tạo kiểu SVG bằng CSS. Dưới đây là một số ví dụ.
Dũng cảm
Đây là văn bản trong Đồ họa vectơ có thể mở rộng (SVG)
In nghiêng
Đây là văn bản in nghiêng trong Đồ họa vectơ có thể mở rộng (SVG)
Gạch chân
Đây là văn bản được gạch chân trong Đồ họa vectơ có thể mở rộng (SVG)
Thành phần
Trong một số trường hợp, khi chúng tôi chỉ muốn áp dụng các kiểu hoặc thuộc tính cho phần cụ thể của Văn bản, chúng tôi có thể sử dụng
Đây là đậm ,đây là chữ nghiêng vàđây là gạch chân
Chế độ viết
Văn bản không chỉ được viết từ từ trái sang phải. Ở những nơi khác trên thế giới, Nhật Bản chẳng hạn, văn bản được viết từ từ trên xuống dưới. Trong SVG, điều này có thể được thực hiện bằng cách sử dụng chế độ viết thuộc tính.
ぃ ぅ き
Trong ví dụ trên, chúng tôi đã đặt một số ký tự tiếng Nhật ngẫu nhiên (đừng hỏi tôi ý nghĩa của chúng, tôi thực sự không biết) và thay đổi hướng với tuyên bố kiểu này, chế độ viết: tb, Ở đâu tb là viết tắt của từ trên xuống dưới.
Đề cương văn bản
Văn bản trong SVG về cơ bản là một đồ họa, vì vậy chúng tôi cũng có thể áp dụng Cú đánh thuộc tính để thêm một đường viền vào Văn bản giống như chúng ta đã làm với các hình dạng khác.
Trong đoạn mã trên, chúng tôi đã thêm Cú đánh thuộc tính lấp đầy gán cho không ai Điều này sẽ dẫn đến việc trình bày văn bản sau đây.
Đường dẫn văn bản
Trong SVG, Văn bản không chỉ có thể được hiển thị theo chiều ngang và chiều dọc mà còn có thể theo mô hình đường dẫn. Đây là cách làm.
Trước tiên, chúng ta cần xác định con đường. Tuy nhiên, việc tạo Đường dẫn trực tiếp trong HTML không trực quan, chúng ta cần hiểu tọa độ và một số lệnh mà tôi chắc chắn rằng hầu hết chúng ta sẽ cố gắng tránh. Vì vậy, để làm cho bước này đơn giản hơn, cá nhân tôi đề nghị chỉ cần mở trình soạn thảo vector (Inkscape hoặc Illustrator), tạo đường dẫn và tạo mã SVG.
Sau đó, đặt defs ở đây có nghĩa là định nghĩa.
Lưu ý rằng chúng tôi cũng đã thêm một ID thuộc tính ID để văn bản của chúng tôi với
Lorem ipsum dolor ngồi amet consectetur.
Đọc thêm: Đường dẫn SVG
Gradient văn bản
Thêm một nền để điền vào Văn bản cũng có khả năng trong SVG và nếu bạn đã thành công trong phần Đường dẫn văn bản ở trên, điều này sẽ dễ dàng hơn nhiều.
Đầu tiên, chúng ta cần xác định màu gradient.
Khi tất cả các định nghĩa cần thiết được thiết lập, bây giờ chúng ta chỉ cần thêm văn bản và tham khảo lấp đầy thuộc tính của gradient ID thuộc tính, như sau;
Dốc
Và đây, văn bản với độ dốc.
Đọc thêm: Gradient và mẫu SVG
Tham khảo thêm
Văn bản trong SVG chắc chắn là mạnh mẽ, thực sự có nhiều điều chúng ta có thể làm ngoài những gì chúng ta có thể ở trong bài này. Vì vậy, dưới đây chúng tôi đã tổng hợp thêm một vài tài liệu tham khảo để phục vụ bạn quan tâm đến chủ đề này.
- Về Phông chữ trong SVG - Divya Manian
- Tài liệu chính thức của Văn bản SVG - W3.org
- SVG Dovumentation tại Mozilla Dev. Mạng với các ví dụ và công cụ - MDN
- Thuộc tính chế độ viết SVG - MDN
- Xem bản demo
- Tải xuống nguồn
