Rendering Shadowed blur Text

---

Rotating a Text String Counterclockwise

Consider the string of rotated text rendered in Figure 8.7.

Figure 8.7: A rotated string of text.

The SVG document in Listing 8.7 demonstrates how to use the SVG text element together with the SVG rotate function in order to render a line of text that has been rotated in the counterclockwise direction.

Listing 8.7 rotatedTextCCW1.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%">  <g transform="translate(100,300)">   <text  x="0" y="0"          transform="rotate(-90)"         fill="red"          font-size="18">         Counter clockwise Rotated Text   </text> </g> </svg>

Remarks

The SVG code in Listing 8.7 is quite straightforward. First the SVG g element translates the origin from the point (0,0) to the point (100,300), and then it renders the text string Counter Clockwise Rotated Text with a fill value of red and a font size of 18. The text string is rotated counterclockwise by means of the following line:

transform="rotate(-90)"

Caution 

Rotations are negative in the counterclockwise direction, which is why the integer in the SVG rotate function is -90 instead of 90.

---