Cách Đường Cong Văn Bản Xung Quanh Hình Tròn Bằng SVG
Văn bản cong có thể mang lại vẻ đẹp trực quan cho các thiết kế, đặc biệt khi tạo ra huy hiệu, đồng xu hoặc logo. Trong hướng dẫn này, tôi sẽ hướng dẫn bạn cách làm cho văn bản uốn cong theo đường tròn bằng SVG, giống như huy hiệu đồng xu 3D mà chúng ta đã xây dựng bằng HTML, CSS và JavaScript.
Tại Sao Nên Sử Dụng Văn Bản Cong?
Văn bản cong cho phép bạn quấn nội dung quanh một đường tròn thay vì theo đường thẳng thông thường. Đây là lựa chọn hoàn hảo cho các huy hiệu hoặc đồng xu, nơi bạn muốn văn bản theo hình dạng của đối tượng. Sử dụng SVG giúp bạn kiểm soát chính xác vị trí, khoảng cách và phong cách, đồng thời vẫn giữ được khả năng mở rộng và phản hồi.
Bước 1: Định Nghĩa Đường Tròn
Bước đầu tiên là tạo một đường mà văn bản của bạn sẽ theo. Trong SVG, bạn định nghĩa đường bằng thẻ <path>. Đối với một đường bán nguyệt phía trên:
html
<path id="circle-top" d="M 28,190 A 162,162 0 0,1 352,190" />Giải Thích Thuộc Tính d:
- M 28,190 → Di chuyển đến điểm bắt đầu
- A 162,162 0 0,1 352,190 → Vẽ một cung tròn có bán kính 162, kết thúc tại 352,190
Đường này định nghĩa đường cong mà văn bản của bạn sẽ di chuyển theo.
Bước 2: Gắn Văn Bản Vào Đường Tròn
Tiếp theo, sử dụng thẻ <text> và <textPath>:
html
<text class="curved-text-top" dy="16">
<textPath href="#circle-top" startOffset="50%">
20 NĂM ORLANDO & CÁC THÀNH PHỐ XUNG QUANH
</textPath>
</text>Giải Thích Thuộc Tính:
- href="#circle-top" → Tham chiếu đến đường mà bạn vừa định nghĩa
- startOffset="50%" → Căn giữa văn bản dọc theo đường
- dy="16" → Điều chỉnh căn chỉnh theo chiều dọc
Phong Cách CSS:
css
.curved-text-top {
font-size: 40px;
font-weight: 900;
letter-spacing: 6px;
fill: white;
text-anchor: middle;
text-shadow: 1px 1px 0 rgba(0,0,0,0.7);
}Bước 3: Điều Chỉnh Khoảng Cách Động
Đôi khi văn bản không vừa vặn hoàn hảo với đường cong. Bạn có thể sử dụng JavaScript để điều chỉnh khoảng cách một cách động:
javascript
const path = document.getElementById('circle-top');
const textPath = document.querySelector('textPath');
function fitTextToArc() {
const pathLength = path.getTotalLength();
const padding = 14;
const available = pathLength + padding;
textPath.setAttribute('lengthAdjust', 'spacingAndGlyphs');
textPath.setAttribute('textLength', available.toFixed(1));
}
window.addEventListener('resize', fitTextToArc);
fitTextToArc();Điều này đảm bảo rằng văn bản của bạn luôn phù hợp với đường cong ngay cả khi kích thước của phần tử chứa thay đổi.
Bước 4: Thêm Các Ngôi Sao Hoặc Văn Bản Cong Khác
Bạn cũng có thể thêm một đường cong phía dưới cho các ngôi sao hoặc các yếu tố trang trí khác:
html
<path id="circle-bottom" d="M 352,190 A 138,138 0 0,1 28,190" />
<text class="curved-stars-bottom" dy="7">
<textPath href="#circle-bottom" startOffset="50%">
<tspan class="star">★</tspan>
<tspan class="star">★</tspan>
<tspan class="star">★</tspan>
<tspan class="star">★</tspan>
<tspan class="star">★</tspan>
</textPath>
</text>Bước 5: Phong Cách và Hoạt Hình
Nâng cao văn bản cong của bạn với CSS để tạo hiệu ứng hover hoặc phát sáng:
css
.curved-stars-bottom .star {
animation: starPulse 2s infinite;
}
@keyframes starPulse {
0%,100% { fill:white; transform: scale(1); }
50% { fill: #ffd700; transform: scale(1.3); }
}✅ Tóm Tắt
Bằng cách kết hợp SVG và một chút JavaScript, bạn có thể tạo ra văn bản cong hoàn hảo cho bất kỳ thành phần UI hình tròn nào.
- Hoàn hảo cho huy hiệu, đồng xu hoặc logo
- Hoạt động với nhiều đường và phông chữ khác nhau
- Hỗ trợ các hoạt ảnh và hiệu ứng tương tác
Kỹ thuật này có thể được mở rộng để tạo ra các huy hiệu 3D tương tác, logo hoặc các yếu tố UI hình tròn khác với kiểu chữ chuyên nghiệp, động.
Các Thực Hành Tốt Nhất
- Sử dụng các thẻ SVG một cách hợp lý để tối ưu hóa hiệu suất.
- Kiểm tra khả năng tương thích trình duyệt cho các thuộc tính SVG.
Cạm Bẫy Thường Gặp
- Không đảm bảo kích thước văn bản phù hợp với đường cong có thể dẫn đến văn bản bị cắt xén.
Mẹo Hiệu Suất
- Giảm kích thước tệp SVG bằng cách loại bỏ các thuộc tính không cần thiết.
Xử lý Sự Cố
- Nếu văn bản không hiển thị, hãy kiểm tra lại ID và đảm bảo rằng đường cong đã được định nghĩa chính xác.
Câu Hỏi Thường Gặp
- SVG là gì?
- SVG (Scalable Vector Graphics) là một định dạng đồ họa vector cho phép tạo ra hình ảnh có thể mở rộng mà không bị mất chất lượng.
- Có thể sử dụng văn bản cong trong các dự án không phải SVG không?
- Có, nhưng sẽ cần các kỹ thuật khác như canvas hoặc CSS để mô phỏng.
Hãy bắt đầu tạo ra các thiết kế độc đáo với văn bản cong ngay hôm nay!
