Học SVG

Tạo nhanh một dòng chữ bằng SVG

Posted on by admin

Đầ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>

Tạo nhanh một dòng chữ bằng SVG 4
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>

Tạo nhanh một dòng chữ bằng SVG 5
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>

Tạo nhanh một dòng chữ bằng SVG 6
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