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

7 Cách Tăng Tốc Ứng Dụng React Hiệu Quả Mà Bạn Có Thể Làm Ngay

React là một thư viện JavaScript phổ biến trong việc xây dựng giao diện người d

Trung Quốc “thả quân bài tẩy”: hàng loạt robot hình người!

MỘT CUỘC CÁCH MẠNG ROBOT ĐANG HÌNH THÀNH Ở TRUNG QUỐC Thượng Hải, ngày 13/5 –

9 Mẹo lập trình Web “ẩn mình” giúp tiết kiệm hàng giờ đồng hồ

Hầu hết các lập trình viên (kể cả những người giỏi) đều tốn thời gian x

Can GPT-4o Generate Images? All You Need to Know about GPT-4o-image

OpenAI‘s GPT-4o, introduced on March 25, 2025, has revolutionized the way we create visual con