Đầu tiên, mình sẽ tạo một khung bao bằng thẻ svg như sau:
<svg width='200' height='200' style='background: #B71C1C'></svg>
Sau đó, mình sẽ gõ nội dung hiện thị bên trong thẻ text, với tọa độ x = 50, y = 24 và kích cỡ chữ 24pt như bên dưới:
<svg width='200' height='200' style='background: #B71C1C'> <text x='50' y='24' font-size='24pt'>I LOVE SVG</text>
</svg>
Mình sẽ xoay dòng chữ ở góc 45 độ và tùy chỉnh tọa độ để canh chữ vào chính giữa, thay đổi màu chữ như bên dưới:
<svg width='200' height='200' style='background: #B71C1C'> <text x='50' y='18' font-size='24pt' transform='rotate(45)' fill='#FFD600'>I LOVE SVG</text>
</svg>
Bây giờ, bạn có thể tạo một dòng chữ bằng SVG thật dễ dàng!
Nguồn: www.naututs.com