SVG (Đồ họa vectơ có thể mở rộng) là ngôn ngữ đánh dấu để mô tả đồ họa vector hai chiều. Bạn có thể sử dụng văn bản trong SVG để thêm nhiều loại thành phần văn bản khác nhau vào đồ họa của mình. Dưới đây là một số cách sử dụng văn bản trong SVG:
Phần tử <text> : Phần tử <text> được sử dụng để tạo các phần tử văn bản đơn giản. Bạn có thể chỉ định nội dung văn bản và vị trí trong khung vẽ SVG.
xml <svg width="300" height="100">
<text x="10" y="40">Hello, SVG!</text>
</svg>
Kiểu dáng văn bản: Bạn có thể áp dụng nhiều tùy chọn kiểu dáng khác nhau cho văn bản, chẳng hạn như cỡ chữ, họ phông chữ, màu tô, nét, v.v.
xml <svg width="300" height="100">
<text x="10" y="40" font-family="Arial" font-size="20" fill="blue">Styled Text</text>
</svg>
<tspan> Phần tử: Phần tử <tspan> cho phép bạn nhóm nhiều khoảng văn bản trong một phần tử <text> . Điều này rất hữu ích khi áp dụng các kiểu khác nhau cho các phần khác nhau của văn bản.
xml <svg width="300" height="100">
<text x="10" y="40">
<tspan fill="red">Red</tspan>
<tspan fill="green" dx="5">Green</tspan>
<tspan fill="blue" dx="5">Blue</tspan>
</text>
</svg>
Đường dẫn văn bản: Bạn có thể đặt văn bản dọc theo đường dẫn bằng phần tử <textPath> . Điều này cho phép bạn tạo văn bản theo một hình dạng hoặc đường cong cụ thể.
xml <svg width="300" height="100">
<path id="myPath" d="M10 80 Q 52.5 10, 95 80 T 180 80" />
<text>
<textPath href="#myPath">Curved Text</textPath>
</text>
</svg>
Xoay văn bản: Bạn có thể xoay văn bản bằng thuộc tính rotate .
xml <svg width="300" height="100">
<text x="10" y="40" transform="rotate(45 10,40)">Rotated Text</text>
</svg>
Căn chỉnh văn bản: Bạn có thể sử dụng thuộc tính text-anchor để chỉ định căn chỉnh văn bản. Các giá trị có thể là "bắt đầu", "giữa" hoặc "kết thúc".
xml <svg width="300" height="100">
<text x="10" y="40" text-anchor="start">Start</text>
<text x="150" y="40" text-anchor="middle">Middle</text>
<text x="290" y="40" text-anchor="end">End</text>
</svg>
Đây chỉ là một vài ví dụ và SVG cung cấp nhiều tính năng phong phú để làm việc với văn bản. Bạn có thể khám phá các thuộc tính và thành phần bổ sung để tùy chỉnh văn bản trong SVG theo nhu cầu thiết kế của mình.