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

Đầu tiên, mình sẽ tạo một khung bao bằng thẻ svg như sau: <svgwidth='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: <svgwidth='200'height='200'style='background: #B71C1C'><textx='50'y='24'font-size='24pt'>I LOVE SVG</text></svg> Mình sẽ xoay dòng chữ ở


Đầu tiên, mình sẽ tạo một khung bao bằng thẻ svg như sau:

<svgwidth='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:

<svgwidth='200'height='200'style='background: #B71C1C'><textx='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:

<svgwidth='200'height='200'style='background: #B71C1C'><textx='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

Nguồn: viblo.asia

Bài viết liên quan

WebP là gì? Hướng dẫn cách để chuyển hình ảnh jpg, png qua webp

WebP là gì? WebP là một định dạng ảnh hiện đại, được phát triển bởi Google

Điểm khác biệt giữa IPv4 và IPv6 là gì?

IPv4 và IPv6 là hai phiên bản của hệ thống địa chỉ Giao thức Internet (IP). IP l

Check nameservers của tên miền xem website trỏ đúng chưa

Tìm hiểu cách check nameservers của tên miền để xác định tên miền đó đang dùn

Mình đang dùng Google Domains để check tên miền hàng ngày

Từ khi thông báo dịch vụ Google Domains bỏ mác Beta, mình mới để ý và bắt đầ