Chapter 13: SVG textPath
SVG textPath is a special child element that lives inside <text>. It lets you make text follow the shape of a <path> (the powerful d-attribute path we learned earlier). This is how you get cool effects like:
- Text curved around a circle (like a logo ring)
- Text waving along a sine curve
- Text following an arc, diagonal, or custom shape
- Animated text sliding along a path
It’s vector magic — text stays sharp when zoomed, scalable for logos, icons, titles, decorative web elements, charts labels, etc.
1. Basic Structure (How It Works)
You need three parts:
- Define a <path> inside <defs> (give it an id)
- Use <text> as parent
- Put <textPath> inside <text>, with href=”#id-of-path” (or xlink:href in older code)
Simple skeleton:
XML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<svg viewBox="0 0 400 200"> <defs> <path id="myCurve" d="M 50 100 Q 200 20 350 100" /> <!-- Your path here --> </defs> <text fill="navy" font-size="28"> <textPath href="#myCurve"> Follow this beautiful curve! </textPath> </text> </svg> |
- <defs> hides the path (you don’t want to see the invisible guide line usually)
- href=”#myCurve” → links to the path’s id (modern browsers use href; old ones used xlink:href)
- Text inside <textPath> follows the path’s direction & shape
2. Your First <textPath> Example (Copy-Paste Right Now!)
Save as textpath.html:
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SVG textPath Basics</title> </head> <body> <h1>Text Following a Curve</h1> <svg width="500" height="300" viewBox="0 0 500 300" style="border:1px solid gray;"> <defs> <!-- Simple quadratic curve path --> <path id="curve1" d="M 50 200 Q 250 50 450 200" /> </defs> <!-- The text on path --> <text font-size="32" fill="darkblue" font-family="Arial"> <textPath href="#curve1"> This text bends with the curve – SVG is awesome! </textPath> </text> <!-- Optional: Show the path itself for reference (stroke only) --> <use href="#curve1" fill="none" stroke="gray" stroke-width="2" stroke-dasharray="5 5"/> </svg> </body> </html> |
What you see: Text starts from left, follows the upward-then-downward curve smoothly.
- Path d=”M 50 200 Q 250 50 450 200″ → start at (50,200), curve to control (250,50), end at (450,200)
- Text follows exactly that shape
- Added dashed gray line so you see the “invisible road” the text is walking on
Zoom browser — text + curve stays perfect!
3. Important Attributes for <textPath>
| Attribute | Meaning | Common Values | Notes |
|---|---|---|---|
| href (or xlink:href) | Reference to the <path> id | “#myPath” | Required! Modern: href; old: xlink:href |
| startOffset | Shift text start position along path | “0%”, “50%”, “20”, “-10%” | % of path length or absolute units — most used! |
| method | How glyphs (letters) follow path | “align” (default), “stretch” | align = normal; stretch = deform letters to fit |
| spacing | Letter spacing adjustment | “auto” (default), “exact” | auto = natural; exact = fixed spacing |
| lengthAdjust | How to fit text if too long/short | “spacing” (default), “spacingAndGlyphs” | spacing = adjust gaps; glyphs = stretch/compress letters |
| textLength | Force total text length | “300”, “80%” | Used with lengthAdjust |
4. More Fun & Useful Examples
Example 1: Text Around a Circle (Classic Ring Logo)
XML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<svg viewBox="0 0 200 200" width="200" height="200"> <defs> <path id="circlePath" d="M 100 10 A 90 90 0 1 1 100 190 A 90 90 0 1 1 100 10" /> </defs> <text font-size="20" fill="purple"> <textPath href="#circlePath" startOffset="25%"> Circular text – full loop! </textPath> </text> </svg> |
- A command makes full ellipse (circle here)
- startOffset=”25%” → starts a quarter way around (top-ish)
- Add another <textPath> for bottom text if needed
Example 2: Start from Middle + Offset
XML
|
0 1 2 3 4 5 6 7 8 |
<textPath href="#curve1" startOffset="50%"> Centered on the curve! </textPath> |
→ Text begins halfway along the path
Example 3: Text on Straight Line (Like Normal but Flexible)
XML
|
0 1 2 3 4 5 6 7 8 9 |
<path id="straight" d="M 20 100 L 480 100" /> <textPath href="#straight" startOffset="10%"> Straight line text with offset </textPath> |
Example 4: Combine with <tspan> for Style Changes
XML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
<text font-size="28"> <textPath href="#curve1"> Normal text <tspan fill="red" font-weight="bold">BOLD RED</tspan> continues! </textPath> </text> |
→ Style parts differently even on curve
5. Teacher’s Tips (Hyderabad Style 😄)
- Path direction matters — text follows path from start to end (use lowercase commands for relative if needed)
- If text overflows path → clips at end (or use textLength to squeeze)
- Browser differences: Chrome/Firefox good; older IE/Edge might need xlink:href
- For reverse direction: Make path go opposite way or use negative startOffset
- Animation idea: Animate startOffset from “0%” to “100%” → text slides along path!
- Common mistake: Forget # in href → text invisible! Or no <defs> → path visible
- Real uses: Curved titles, circular badges, wavy slogans, map labels, decorative web art
Got <textPath> clear now? It’s one of the coolest SVG features! Want next: Animated sliding text? Text on heart path? Full circular logo example? Or combine with gradients/filters? Just say — we’re making you an SVG pro! 🚀
