Share this Page URL

Chapter 7. Transformations in SVG > Transformation SVG DOM Interfaces - Pg. 224

Transformations in SVG </text> </defs> <use xlink:href="#myText" transform="scale(2.0) translate(150,80) <use xlink:href="#myText" transform="translate(150,80) scale(2.0) <use xlink:href="#myText" transform="translate(150,80) rotate(45) <use xlink:href="#myText" transform="rotate(45) translate(150,80) </svg> 224 rotate(45) translate(200,-100)"/> rotate(45) translate(200,-100)"/> translate(200,-100) scale(2.0)"/> scale(2.0) translate(200,-100)"/> Each of the use elements in Listing 7.17 has the same four transformations specified-- scale(2.0), translate(150,80), rotate(45), and translate (200,-100). The only difference among the use elements is that the order of the transformations is different on each use element. Figure 7.15 shows the slightly panned onscreen result of running Listing 7.17. As you can see, the four pieces of text are rendered in different places onscreen. It isn't important that you understand exactly where the final position for any combination is, but it is important to grasp the idea that the order of transformations affects the final position of any SVG object onscreen. Figure 7.15. The order of transformations affects the final result. In the final part of the chapter, the SVG DOM interfaces for SVG transformations are described. Transformation SVG DOM Interfaces In this section, we will describe the SVG DOM interfaces that are relevant to SVG transformations. The SVGMatrix Object As mentioned earlier in this chapter, transformations can be viewed as representing matrix trans- formations. The SVGMatrix object is used to express the six parts of the matrix in its properties listed below. Its methods include methods to produce transformations similar to those we can pro- duce using the declarative syntax described earlier in this chapter.