O'Reilly logo

Designing SVG Web Graphics by Andrew H. Watt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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"> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required