Displaying Text with blur Filters

---

Text Following a Specified Path

Consider the text string rendered in Figure 8.11.

Figure 8.11: Text following a specified path.

The SVG document in Listing 8.11 demonstrates how to use the SVG textPath element and the SVG text element in order to display a text string that follows a path.

Listing 8.11 textOnQBezierPath1.svg

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"   "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">  <svg width="100%" height="100%">    <defs>   <path          d="m0,0 Q100,0 200,200 T300,200 z"/> </defs> <g transform="translate(100,100)">   <text  fill="red"        stroke="blue" stroke-width="2"       font-size="24">   <textPath xlink:href="#pathDefinition">         Sample Text that follows a path specified by a Quadratic 
           Bezier curve   </textPath>   </text> </g> </svg>

Remarks

The SVG code in Listing 8.11 contains the SVG textPath element that contains a horizontal text string which has a font size of 24 and a fill value of red. The SVG textPath element text refers to an id with value pathDefinition, which is defined as a quadratic Bezier curve by means of the SVG path element inside the SVG defs element. (Got it?)

---