Displaying Text on a Path
I described in Chapter 3, “Creating Static Graphics Elements,” how the SVG <path> element is created. The <path> element can be used in combination with the <text> element and the <textPath> element to display text on a path.
Listing 4.15. (TextonPath01.svg)
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/ DTD/svg10.dtd"> <svg width="1000" height="300"> <defs> <path id="MyCurve" d="M 100 250 C 200 100 300 0 400 80 C 500 150 600 300 700 200 C 800 100 900 0 1000 100" /> </defs> <use xlink:href="#MyCurve" style="fill:none; stroke:white" /> <text style="font-family:Arial, sans-serif; font-size:18; fill:blue"> <textPath xlink:href="#MyCurve"> ... |
Get Designing SVG Web Graphics now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
