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

Chapter 7. Transformations in SVG > Introduction to Transformations

Introduction to Transformations

First, let's demonstrate some of the transformations that are possible in SVG. Listing 7.1 shows several simple transformations available in SVG. SVG also allows us to combine such transformations.

Listing 7.1. SimpleTransformations.svg—Some Examples of Simple SVG Transformations

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100%" height="100%">
<text x="30px" y="50px">I am normal text</text>
<text x="30px" y="50px" transform="translate(0,300px)">
I am translated vertically
</text>
<text x="30px" y="50px" transform="translate(200px,0)">
I am translated horizontally
</text>
<text x="30px" y="50px" transform="scale(5)">
I am scaled text
</text>
<text x="30px" y="50px" transform="rotate(315, 100px, 100px)">
I am rotated
</text>
<text x="330px" y="150px" transform="skewX(45)">
I am skewed X
</text>
<text x="330px" y="250px" transform="skewY(25)">
I am skewed Y
</text>
</svg>
					

					  


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


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