• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 4. Using Text in SVG > Displaying Text on a Path

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"> 
Scalable Vector Graphics allows you to place 
text on a path. You can use the <path>, 
<text> and <textPath> 
elements. 
</textPath> 
</text> 
</svg> 

					  


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint