SVG from Zero to Senior · Part 4 — Text & textPath

Đa số dùng HTML khi cần chữ, dùng SVG khi cần hình. Nhưng text SVG là siêu năng lực riêng: nó sống trong hệ toạ độ, scale hoàn hảo, có thể tô gradient, clip, animate — và quan trọng, nó vẫn là chữ thật, chọn được, truy cập được, không phải ảnh chụp chữ.

Kéo các control — dịch baseline, đổi anchor, uốn đường cong — rồi mới đọc luật.

Mở demo đầy đủ:

Cái bẫy baseline

Bất ngờ số một: trong SVG, y là baseline, không phải đỉnh chữ.

<text x="20" y="40" font-size="28">Hello SVG</text>

Chữ đó nằm trên y=40, với phần descender (đuôi g, y, p) thả xuống dưới. Nếu chữ bị cắt ở đỉnh viewBox, con đặt y quá nhỏ. Dùng dominant-baseline="middle" (hoặc central) khi muốn canh giữa dọc thật sự, ví dụ nhãn trong vòng tròn.

text-anchor — canh ngang

text-anchor quyết định điểm x có nghĩa gì:

• x là mép trái (với văn bản trái-sang-phải).
• x là tâm. Lựa chọn cho nhãn canh giữa.
• x là mép phải.

<text x="150" y="80" text-anchor="middle">Centred</text>

Đây là công cụ cho nhãn trong biểu đồ và huy hiệu — neo vào một điểm cố định và chữ nở đối xứng.

tspan — span, offset, và xuống dòng giả

Text SVG không tự xuống dòng và bỏ qua \n. Để style một phần chuỗi hoặc tạo nhiều dòng, dùng <tspan>:

<text x="20" y="40" font-size="24">
  Total:
  <tspan fill="#c8ff00" font-weight="600">$1,240</tspan>
</text>

<!-- multi-line: each tspan resets x and nudges y with dy -->
<text x="20" y="40">
  <tspan x="20" dy="0">Line one</tspan>
  <tspan x="20" dy="1.2em">Line two</tspan>
</text>

dx/dy dịch tương đối so với glyph trước — hoàn hảo cho chỉ số trên, tinh chỉnh kerning, và mẫu xuống dòng ở trên. Nếu cần wrap đoạn văn thật, đó là việc của HTML trong <foreignObject> — nhưng dùng tiết kiệm.

textPath — món đinh

Đây là hiệu ứng con không làm được bằng CSS thuần: chữ đi theo đường cong. Định nghĩa một path, rồi tham chiếu từ <textPath>:

<defs>
  <path id="curve" d="M 20 110 Q 150 40 280 110" />
</defs>
<text font-size="18" fill="#60a5fa">
  <textPath href="#curve" startOffset="0%">
    SVG TEXT ON A CURVE •
  </textPath>
</text>

• Chữ chạy dọc theo chiều dài path, mỗi glyph xoay theo tiếp tuyến cục bộ.
• startOffset (độ dài hoặc %) dời chỗ chữ bắt đầu — animate nó và chữ trượt dọc path.
• Path được tham chiếu không được vẽ trừ khi con render nó; trong production cho nó stroke="none".

Cái này tạo nên huy hiệu tròn, nhãn ruy băng, và chú thích biểu đồ cong. Chỉ dùng xlink:href cũ nếu phải hỗ trợ trình duyệt cổ; SVG hiện đại dùng href thường.

Font và cái bẫy chuyển giao

Text SVG dùng font nào có sẵn lúc render, y như CSS. Nếu con ship SVG tham chiếu “Brand Sans” mà người xem không có, họ nhận font dự phòng. Cho logo cần giống hệt mọi nơi, designer chuyển text thành path (outline) khi export — đánh đổi mất khả năng chọn và truy cập. Quyết định senior: giữ text là text cho UI và nội dung; chỉ outline cho artwork thương hiệu cố định.

Lời cảnh báo của sư phụ

• y là baseline. Chữ biến mất trên đỉnh? Tăng y.
• Không tự wrap. Chuỗi dài tràn viewBox lặng lẽ. Lên kế hoạch xuống dòng bằng <tspan>.
• textPath cần id path thật trong cùng tài liệu. href hỏng thì không render gì, không báo lỗi.

Luyện tập, không thì coi như chưa học

1. Nhãn huy hiệu canh giữa: text với text-anchor="middle" và dominant-baseline="central" ngay giữa vòng tròn.
2. Dòng giá: một <text> với nhãn mờ và một <tspan> sáng cho con số.
3. Con dấu tròn: path tròn + <textPath> để khẩu hiệu chạy vòng trên. Animate startOffset để xoay.

Phần tiếp theo

Giờ con vẽ, sơn, và viết chữ được. Nhưng mọi thứ tới giờ vẫn tĩnh và phẳng trong một hệ toạ độ. Ở Phần 5 ta học di chuyển và tái dùng: thuộc tính transform (translate/scale/rotate/skew), vì sao thứ tự quan trọng, gom nhóm bằng <g>, và sức mạnh xoắn não của hệ toạ độ lồng nhau với <svg> bên trong.