SVG Essentials/Transforming the Coordinate System - Revision history

Docbook2Wiki: Initial conversion from Docbook

Docbook2Wiki — Fri, 07 Mar 2008 13:40:50 GMT

Initial conversion from Docbook

←Older revision

Revision as of 13:40, 7 March 2008

Docbook2Wiki: Initial conversion from Docbook

Docbook2Wiki — Fri, 07 Mar 2008 12:51:41 GMT

Initial conversion from Docbook

←Older revision

Revision as of 12:51, 7 March 2008

Evanlenz: 1 revision(s)

Evanlenz — Thu, 06 Mar 2008 23:40:33 GMT

1 revision(s)

←Older revision

Revision as of 23:40, 6 March 2008

Docbook2Wiki: Initial conversion from Docbook

Docbook2Wiki — Thu, 06 Mar 2008 23:33:32 GMT

Initial conversion from Docbook

←Older revision

Revision as of 23:33, 6 March 2008

Evanlenz: 1 revision(s)

Evanlenz — Thu, 06 Mar 2008 22:52:41 GMT

1 revision(s)

←Older revision

Revision as of 22:52, 6 March 2008

Docbook2Wiki: Initial conversion from Docbook

Docbook2Wiki — Thu, 06 Mar 2008 22:38:57 GMT

Initial conversion from Docbook

←Older revision

Revision as of 22:38, 6 March 2008

Evanlenz: 1 revision(s)

Evanlenz — Thu, 06 Mar 2008 22:22:02 GMT

1 revision(s)

←Older revision

Revision as of 22:22, 6 March 2008

Docbook2Wiki: Initial conversion from Docbook

Docbook2Wiki — Thu, 06 Mar 2008 22:21:01 GMT

Initial conversion from Docbook

←Older revision		Revision as of 22:21, 6 March 2008
Line 21:		Line 21:
	'''Figure 5-1. Result of moving with use'''		'''Figure 5-1. Result of moving with use'''

-	[[Image:SVG ~~Essentials/I_5_tt70~~.png\|Result of moving with use]]	+	[[Image:SVG Essentials_I_5_tt70.png\|Result of moving with use]]
	</div>		</div>

Line 43:		Line 43:
	'''Figure 5-2. How moving appears to work (but really doesn't)'''		'''Figure 5-2. How moving appears to work (but really doesn't)'''

-	[[Image:SVG ~~Essentials/I_5_tt71~~.png\|How moving appears to work (but really doesn't)]]	+	[[Image:SVG Essentials_I_5_tt71.png\|How moving appears to work (but really doesn't)]]
	</div>		</div>

Line 51:		Line 51:
	'''Figure 5-3. How moving with translate really works'''		'''Figure 5-3. How moving with translate really works'''

-	[[Image:SVG ~~Essentials/I_5_tt72~~.png\|How moving with translate really works]]	+	[[Image:SVG Essentials_I_5_tt72.png\|How moving with translate really works]]
	</div>		</div>

Line 88:		Line 88:
	'''Figure 5-4. Result of using scale transformation'''		'''Figure 5-4. Result of using scale transformation'''

-	[[Image:SVG ~~Essentials/I_5_tt73~~.png\|Result of using scale transformation]]	+	[[Image:SVG Essentials_I_5_tt73.png\|Result of using scale transformation]]
	</div>		</div>

Line 96:		Line 96:
	'''Figure 5-5. How the scale transformation works'''		'''Figure 5-5. How the scale transformation works'''

-	[[Image:SVG ~~Essentials/I_5_tt74~~.png\|How the scale transformation works]]	+	[[Image:SVG Essentials_I_5_tt74.png\|How the scale transformation works]]
	</div>		</div>

Line 122:		Line 122:
	'''Figure 5-6. Result of using non-uniform scale transformation'''		'''Figure 5-6. Result of using non-uniform scale transformation'''

-	[[Image:SVG ~~Essentials/I_5_tt75~~.png\|Result of using non-uniform scale transformation]]	+	[[Image:SVG Essentials_I_5_tt75.png\|Result of using non-uniform scale transformation]]
	</div>		</div>

Line 158:		Line 158:
	'''Figure 5-7. Result of transforming a single graphic'''		'''Figure 5-7. Result of transforming a single graphic'''

-	[[Image:SVG ~~Essentials/I_5_tt78~~.png\|Result of transforming a single graphic]]	+	[[Image:SVG Essentials_I_5_tt78.png\|Result of transforming a single graphic]]
	</div>		</div>

Line 196:		Line 196:
	'''Figure 5-8. Result of translate followed by scale'''		'''Figure 5-8. Result of translate followed by scale'''

-	[[Image:SVG ~~Essentials/I_5_tt82~~.png\|Result of translate	+	[[Image:SVG Essentials_I_5_tt82.png\|Result of translate
	followed by scale]]		followed by scale]]
	</div>		</div>
Line 205:		Line 205:
	'''Figure 5-9. How translate followed by scale works'''		'''Figure 5-9. How translate followed by scale works'''

-	[[Image:SVG ~~Essentials/I_5_tt83~~.png\|How translate	+	[[Image:SVG Essentials_I_5_tt83.png\|How translate
	followed by scale works]]		followed by scale works]]
	</div>		</div>
Line 235:		Line 235:
	'''Figure 5-10. Result of scale followed by translate'''		'''Figure 5-10. Result of scale followed by translate'''

-	[[Image:SVG ~~Essentials/I_5_tt84~~.png\|Result of scale	+	[[Image:SVG Essentials_I_5_tt84.png\|Result of scale
	followed by translate]]		followed by translate]]
	</div>		</div>
Line 244:		Line 244:
	'''Figure 5-11. How scale followed by translate works'''		'''Figure 5-11. How scale followed by translate works'''

-	[[Image:SVG ~~Essentials/I_5_tt85~~.png\|How scale	+	[[Image:SVG Essentials_I_5_tt85.png\|How scale
	followed by translate works]]		followed by translate works]]
	</div>		</div>
Line 255:		Line 255:
	'''Figure 5-12. Trapezoid drawn with Cartesian coordinates'''		'''Figure 5-12. Trapezoid drawn with Cartesian coordinates'''

-	[[Image:SVG ~~Essentials/I_5_tt86~~.png\|Trapezoid drawn with Cartesian coordinates]]	+	[[Image:SVG Essentials_I_5_tt86.png\|Trapezoid drawn with Cartesian coordinates]]
	</div>		</div>

Line 277:		Line 277:
	'''Figure 5-13. Result of using original Cartesian coordinates'''		'''Figure 5-13. Result of using original Cartesian coordinates'''

-	[[Image:SVG ~~Essentials/I_5_tt87~~.png\|Result of using original Cartesian coordinates]]	+	[[Image:SVG Essentials_I_5_tt87.png\|Result of using original Cartesian coordinates]]
	</div>		</div>

Line 323:		Line 323:
	'''Figure 5-14. Transformed Cartesian coordinates'''		'''Figure 5-14. Transformed Cartesian coordinates'''

-	[[Image:SVG ~~Essentials/I_5_tt90~~.png\|Transformed Cartesian coordinates]]	+	[[Image:SVG Essentials_I_5_tt90.png\|Transformed Cartesian coordinates]]
	</div>		</div>

Line 333:		Line 333:
	'''Figure 5-15. Default measurement of angles'''		'''Figure 5-15. Default measurement of angles'''

-	[[Image:SVG ~~Essentials/I_5_tt91~~.png\|Default measurement of angles]]	+	[[Image:SVG Essentials_I_5_tt91.png\|Default measurement of angles]]
	</div>		</div>

Line 353:		Line 353:
	'''Figure 5-16. Result of rotation around the origin'''		'''Figure 5-16. Result of rotation around the origin'''

-	[[Image:SVG ~~Essentials/I_5_tt92~~.png\|Result of rotation around the origin]]	+	[[Image:SVG Essentials_I_5_tt92.png\|Result of rotation around the origin]]
	</div>		</div>

Line 359:		Line 359:
	'''Figure 5-17. How rotation around the origin works'''		'''Figure 5-17. How rotation around the origin works'''

-	[[Image:SVG ~~Essentials/I_5_tt93~~.png\|How rotation around the origin works]]	+	[[Image:SVG Essentials_I_5_tt93.png\|How rotation around the origin works]]
	</div>		</div>

Line 389:		Line 389:
	'''Figure 5-18. Result of rotation around a center point'''		'''Figure 5-18. Result of rotation around a center point'''

-	[[Image:SVG ~~Essentials/I_5_tt94~~.png\|Result of rotation around a center point]]	+	[[Image:SVG Essentials_I_5_tt94.png\|Result of rotation around a center point]]
	</div>		</div>

Line 423:		Line 423:
	'''Figure 5-19. Result of scaling around a center point'''		'''Figure 5-19. Result of scaling around a center point'''

-	[[Image:SVG ~~Essentials/I_5_tt96~~.png\|Result of scaling around a center point]]	+	[[Image:SVG Essentials_I_5_tt96.png\|Result of scaling around a center point]]
	</div>		</div>

Line 474:		Line 474:
	'''Figure 5-20. Result of skewX and skewY transformations'''		'''Figure 5-20. Result of skewX and skewY transformations'''

-	[[Image:SVG ~~Essentials/I_5_tt97~~.png\|Result of skewX and	+	[[Image:SVG Essentials_I_5_tt97.png\|Result of skewX and
	skewY transformations]]		skewY transformations]]
	</div>		</div>

Docbook2Wiki: Initial conversion from Docbook

Docbook2Wiki — Tue, 04 Mar 2008 22:37:00 GMT

Initial conversion from Docbook

New page

{{SVG Essentials/TOC}}
Up to this point, all graphics have been displayed "as is." There will be times when you have a graphic that you would like to move to a new location, rotate, or scale. To accomplish these tasks, you add the <tt>transform</tt> attribute to the appropriate SVG elements. This chapter examines the details of these transformations.

== The translate Transformation ==

In [[SVG Essentials/Document Structure|Chapter 4]], you saw that you can use <tt>x</tt> and <tt>y</tt> attributes with the <tt><use></tt> element to place a group of graphic objects at a specific place. Look at the SVG in [[SVG Essentials/Transforming the Coordinate System#svgess-CHP-5-EX-1|Example 5-1]], which defines a square and draws it at the upper left corner of the grid, then re-draws it with the upper left corner at coordinates (50, 50). The dotted lines in [[SVG Essentials/Transforming the Coordinate System#svgess-CHP-5-FIG-1|Figure 5-1]] aren't part of the SVG, but serve to show the part of the canvas that we're interested in.

<div id="svgess-CHP-5-EX-1">
'''Example 5-1. Moving a graphic with use'''

<svg width="200px" height="200px" viewBox="0 0 200 200">
<g id="square">
<rect x="0" y="0" width="20" height="20"
style="fill: black; stroke-width: 2;"/>
</g>
<use xlink:href="#square" x="50" y="50"/>
</svg>
</div>

<div id="svgess-CHP-5-FIG-1">
'''Figure 5-1. Result of moving with use'''

[[Image:SVG Essentials/I_5_tt70.png|Result of moving with use]]
</div>

As it turns out, the <tt>x</tt> and <tt>y</tt> values are really a shorthand for one form of the more general and more powerful <tt>transform</tt> attribute. Specifically, the <tt>x</tt> and <tt>y</tt> values are converted to an attribute like <tt>transform="translate(</tt> <tt>''x-value''</tt>, <tt>''y-value''</tt> <tt>)"</tt>, where <tt>translate</tt> is a fancy technical term for "move." The ''x-value'' and ''y-value'' are measured in the current user coordinate system. Let's use <tt>transform</tt> to get the same effect of making a second square with its upper left corner at (50, 50). [[SVG Essentials/Transforming the Coordinate System#svgess-CHP-5-EX-2|Example 5-2]] lists the SVG.

<div id="svgess-CHP-5-EX-2">
'''Example 5-2. Moving the coordinate system with translation'''

<svg width="200px" height="200px" viewBox="0 0 200 200">
<g id="square">
<rect x="0" y="0" width="20" height="20"
style="fill: none; stroke:black; stroke-width: 2;"/>
</g>
<use xlink:href="#square" '''transform="translate(50,50)"'''/>
</svg>
</div>

The resulting display will look exactly like that in [[SVG Essentials/Transforming the Coordinate System#svgess-CHP-5-FIG-1|Figure 5-1]]. You might think this was accomplished by moving the square to a different place on the grid, as shown conceptually in [[SVG Essentials/Transforming the Coordinate System#svgess-CHP-5-FIG-2|Figure 5-2]], but you would be wrong.

<div id="svgess-CHP-5-FIG-2">
'''Figure 5-2. How moving appears to work (but really doesn't)'''

[[Image:SVG Essentials/I_5_tt71.png|How moving appears to work (but really doesn't)]]
</div>

What is really going on behind the scenes is an entirely different story. Rather than moving the square, the <tt>translate</tt> specification picks up the ''entire grid'' and moves it to a new location on the canvas. As far as the square is concerned, it's still being drawn with its upper left corner at (0, 0), as depicted in [[SVG Essentials/Transforming the Coordinate System#svgess-CHP-5-FIG-3|Figure 5-3]].

<div id="svgess-CHP-5-FIG-3">
'''Figure 5-3. How moving with translate really works'''

[[Image:SVG Essentials/I_5_tt72.png|How moving with translate really works]]
</div>

<div class="warning">
'''Warning'''

A translation transformation ''never'' changes a graphic object's grid coordinates; rather, it changes the position of the grid on the canvas.
</div>

At first glance, using <tt>translate</tt> seems as ridiculous and inefficient as moving your couch further away from the outside wall of the house by moving the entire living room, walls and all, to a new position. Indeed, if translation were the only transformation available, moving the entire coordinate system would be wasteful. However, we will soon see other transformations, and combinations of a sequence of transformations, which are more mathematically and conceptually convenient if they apply to the entire coordinate system.

== The scale Transformation ==

It is possible to make an object appear larger or smaller than the size at which it was defined by scaling the coordinate system. Such a transformation is specified either as:

;<tt>transform="scale(</tt> <tt>''value''</tt> <tt>)"</tt>
: Multiplies all ''x''- and ''y''-coordinates by the given <tt>''value''</tt>.
;<tt>transform="scale(</tt> <tt>''x-value''</tt> <tt>,</tt> <tt>''y-value''</tt> <tt>)"</tt>
: Multiplies all ''x''-coordinates by the given <tt>''x-value''</tt> and all ''y''-coordinates by the given <tt>''y-value''</tt>.

[[SVG Essentials/Transforming the Coordinate System#svgess-CHP-5-EX-3|Example 5-3]] is an example of the first kind of scaling transformation, which uniformly doubles the scale of both axes. Once again, the dotted lines in [[SVG Essentials/Transforming the Coordinate System#svgess-CHP-5-FIG-4|Figure 5-4]] aren't in the SVG; they simply show the area of the canvas that we're interested in. Note that the square's upper left corner is at (10, 10).

<div id="svgess-CHP-5-EX-3">
'''Example 5-3. Uniformly scaling a graphic'''

<svg width="200px" height="200px" viewBox="0 0 200 200">
<g id="square">
<rect x="10" y="10" width="20" height="20"
style="fill: none; stroke: black;"/>
</g>
<use xlink:href="#square" transform="scale(2)"/>
</svg>
</div>

<div id="svgess-CHP-5-FIG-4">
'''Figure 5-4. Result of using scale transformation'''

[[Image:SVG Essentials/I_5_tt73.png|Result of using scale transformation]]
</div>

You might be thinking, "Wait a minute — I can understand why the square got larger. But I didn't ask for a <tt>translate</tt>, so why is the square in a different place?" Everything becomes clear when you look at [[SVG Essentials/Transforming the Coordinate System#svgess-CHP-5-FIG-5|Figure 5-5]] to see what has actually occurred. The grid hasn't moved; the (0, 0) point of the coordinate system is still in the same place, but each user coordinate is now twice as large as it used to be. You can see from the grid lines that the upper left corner of the rectangle is still at (10, 10) on the new, larger grid, since objects ''never'' move. This also explains why the outline of the larger square is thicker. The <tt>stroke-width</tt> is still one user unit, but that unit has now become twice as large, so the stroke thickens.

<div id="svgess-CHP-5-FIG-5">
'''Figure 5-5. How the scale transformation works'''

[[Image:SVG Essentials/I_5_tt74.png|How the scale transformation works]]
</div>

<div class="warning">
'''Warning'''

A scaling transformation ''never'' changes a graphic object's grid coordinates or its stroke width; rather, it changes the size of the coordinate system (grid) with respect to the canvas.
</div>

It is possible to specify a different scale factor for the ''x''-axis and ''y''-axis of the coordinate system by using the second form of the <tt>scale</tt> transformation. [[SVG Essentials/Transforming the Coordinate System#svgess-CHP-5-EX-4|Example 5-4]] draws the square with the ''x''-axis scaled by a factor of three and the ''y''-axis scaled by a factor of one and a half. As you can see in [[SVG Essentials/Transforming the Coordinate System#svgess-CHP-5-FIG-6|Figure 5-6]], the one-unit stroke width is also non-uniformly scaled.

<div id="svgess-CHP-5-EX-4">
'''Example 5-4. Non-uniform scaling of a graphic'''

<svg width="200px" height="200px" viewBox="0 0 200 200">
<g id="square">
<rect x="10" y="10" width="20" height="20"
style="fill: none; stroke: black;"/>
</g>
<use xlink:href="#square" transform="scale(3, 1.5)"/>
</svg>
</div>

<div id="svgess-CHP-5-FIG-6">
'''Figure 5-6. Result of using non-uniform scale transformation'''

[[Image:SVG Essentials/I_5_tt75.png|Result of using non-uniform scale transformation]]
</div>

To this point, we have only applied the <tt>transform</tt> attribute to the <tt><use></tt> element. You can apply a transformation to a series of elements by grouping them and transforming the group:

<g id="group1" transform="translate(3, 5)">
<line x1="10" y1="10" x1="30" y2="30"/>
<circle cx="20" cy="20" r="10"/>
</g>

You may also apply a transformation to a single object or basic shape. For example, here is a rectangle whose coordinate system is scaled by a factor of three:

<rect x="15" y="20" width="10" height="5"
'''transform="scale(3)"'''
style="fill: none; stroke: black;"/>

It's fairly clear that the width and height of the scaled rectangle should be three times as large as the unscaled rectangle. However, you may wonder if the ''x''- and ''y''-coordinates are evaluated before or after the rectangle is scaled. The answer is that SVG applies transformations to the coordinate system before it evaluates any of the shape's coordinates. [[SVG Essentials/Transforming the Coordinate System#svgess-CHP-5-EX-5|Example 5-5]] is the SVG for the scaled rectangle, shown in [[SVG Essentials/Transforming the Coordinate System#svgess-CHP-5-FIG-7|Figure 5-7]] with grid lines that are drawn in the unscaled coordinate system.

<div id="svgess-CHP-5-EX-5">
'''Example 5-5. Transforming a single graphic'''


<line x1="0" y1="0" x2="100" y2="0" style="stroke: black;"/>
<line x1="0" y1="0" x2="0" y2="100" style="stroke: black;"/>
<line x1="45" y1="0" x2="45" y2="100" style="stroke: gray;"/>
<line x1="0" y1="60" x2="100" y2="60" style="stroke: gray;"/>


<rect x="15" y="20" width="10" height="5"
'''transform="scale(3)"'''
style="fill: none; stroke: black;"/>
</div>

<div id="svgess-CHP-5-FIG-7">
'''Figure 5-7. Result of transforming a single graphic'''

[[Image:SVG Essentials/I_5_tt78.png|Result of transforming a single graphic]]
</div>

<div class="note">
'''Note'''

The effect of applying a transformation to a shape is the same as if the shape were enclosed in a transformed group. In the preceding example, the scaled rectangle is equivalent to this SVG:

<g transform="scale(3)">
<rect x="15" y="20" width="10" height="5"
style="fill: none; stroke: black;"/>
</g>
</div>

== Sequences of Transformations ==

It is possible to do more than one transformation on a graphic object. You just put the transformations, separated by whitespace, in the value of the <tt>transform</tt> attribute. Here is a rectangle that undergoes two transformations, a translation followed by a scaling. (The axes are drawn to show that the rectangle has, indeed, moved.)


<line x1="0" y1="0" x2="0" y2="100" style="stroke: gray;"/>
<line x1="0" y1="0" x2="100" y2="0" style="stroke: gray;"/>

<rect x="10" y="10" height="20" width="15"
transform="translate(30, 20) scale(2)"
style="fill: gray;"/>

This is the equivalent of the following sequence of nested groups, and both will produce what you see in [[SVG Essentials/Transforming the Coordinate System#svgess-CHP-5-FIG-8|Figure 5-8]].

<g transform="translate(30, 20)">
<g transform="scale(2)">
<rect x="10" y="10" height="20" width="15"
style="fill: gray;"/>
</g>
</g>

<div id="svgess-CHP-5-FIG-8">
'''Figure 5-8. Result of translate followed by scale'''

[[Image:SVG Essentials/I_5_tt82.png|Result of translate
followed by scale]]
</div>

[[SVG Essentials/Transforming the Coordinate System#svgess-CHP-5-FIG-9|Figure 5-9]] shows what is happening at each stage of the transformation.

<div id="svgess-CHP-5-FIG-9">
'''Figure 5-9. How translate followed by scale works'''

[[Image:SVG Essentials/I_5_tt83.png|How translate
followed by scale works]]
</div>

<div class="note">
'''Note'''

The order in which you do a sequence of transformations affects the result. In general, transformation A followed by transformation B will not give the same result as transformation B followed by transformation A.
</div>

[[SVG Essentials/Transforming the Coordinate System#svgess-CHP-5-EX-6|Example 5-6]] draws the same rectangle as in the previous example, only in a light gray color. Then it draws the rectangle again, but does the <tt>scale</tt> before the <tt>translate</tt>. As you can see from the result in [[SVG Essentials/Transforming the Coordinate System#svgess-CHP-5-FIG-10|Figure 5-10]], the rectangles end up in very different places on the canvas.

<div id="svgess-CHP-5-EX-6">
'''Example 5-6. Sequence of transformations -- scale followed by translate'''


<line x1="0" y1="0" x2="0" y2="100" style="stroke: gray;"/>
<line x1="0" y1="0" x2="100" y2="0" style="stroke: gray;"/>

<rect x="10" y="10" width="20" height="15"
transform="translate(30, 20) scale(2)" style="fill: #ccc;"/>

<rect x="10" y="10" width="20" height="15"
'''transform="scale(2) translate(30, 20)"'''
style="fill: black;"/>
</div>

<div id="svgess-CHP-5-FIG-10">
'''Figure 5-10. Result of scale followed by translate'''

[[Image:SVG Essentials/I_5_tt84.png|Result of scale
followed by translate]]
</div>

The reason that the black rectangle ends up farther away from the origin is that the scaling is applied first, so that the translate of 20 units in the ''x''-direction and 10 units in the ''y''-direction is done with units that are now twice as large, as shown in [[SVG Essentials/Transforming the Coordinate System#svgess-CHP-5-FIG-11|Figure 5-11]].

<div id="svgess-CHP-5-FIG-11">
'''Figure 5-11. How scale followed by translate works'''

[[Image:SVG Essentials/I_5_tt85.png|How scale
followed by translate works]]
</div>

== Technique: Converting from Cartesian Coordinates ==

If you are transferring data from other systems to SVG, you may have to deal with vector drawings that use Cartesian coordinates (the ones you learned about in high school algebra) to represent data. In this system, the (0, 0) point is at the lower left of the canvas, and ''y''-coordinates increase as you move upwards. [[SVG Essentials/Transforming the Coordinate System#svgess-CHP-5-FIG-12|Figure 5-12]] shows the coordinates of a trapezoid drawn with Cartesian coordinates.

<div id="svgess-CHP-5-FIG-12">
'''Figure 5-12. Trapezoid drawn with Cartesian coordinates'''

[[Image:SVG Essentials/I_5_tt86.png|Trapezoid drawn with Cartesian coordinates]]
</div>

Since the ''y''-axis is "upside-down" relative to the SVG default, the coordinates have to be recalculated. Rather than do it by hand, you can use a sequence of transformations to have SVG do all the work for you. First, translate the picture into SVG, with the coordinates exactly as shown in [[SVG Essentials/Transforming the Coordinate System#svgess-CHP-5-EX-7|Example 5-7]]. (We'll also include the axes as a guide.) To nobody's surprise, the picture will come out upside-down. Note that the image in [[SVG Essentials/Transforming the Coordinate System#svgess-CHP-5-FIG-13|Figure 5-13]] is ''not'' left-to-right reversed, since the ''x''-axis points the same direction in both Cartesian coordinates and the default SVG coordinate system.

<div id="svgess-CHP-5-EX-7">
'''Example 5-7. Direct use of Cartesian coordinates'''

<svg width="200px" height="200px" viewBox="0 0 200 200">

<line x1="0" y1="0" x2="100" y2="0" style="stroke: black;"/>
<line x1="0" y1="0" x2="0" y2="100" style="stroke: black;"/>


<polygon points="40 40, 100 40, 70 70, 40 70"
style="fill: gray; stroke: black;"/>
</svg>
</div>

<div id="svgess-CHP-5-FIG-13">
'''Figure 5-13. Result of using original Cartesian coordinates'''

[[Image:SVG Essentials/I_5_tt87.png|Result of using original Cartesian coordinates]]
</div>

To finish the conversion, follow these steps:

<ol>
<li><div>Find the maximum ''y''-coordinate in the original drawing. In this case, it turns out to be 100, the endpoint of the ''y''-axis in the original.
</div></li>

<li><div>Enclose the entire drawing in a <tt><g></tt> element.
</div></li>

<li><div>Enter a translate that moves the coordinate system downwards by the maximum <tt>y</tt> value.

transform="translate(0, ''max-y'')"
</div></li>

<li><div>The next transform will be to scale the ''y''-axis by a factor of -1, flipping it upside-down.

transform="translate(0, ''max-y'') '''scale(1, -1)'''"
</div></li>

</ol>

[[SVG Essentials/Transforming the Coordinate System#svgess-CHP-5-EX-8|Example 5-8]] incorporates this transformation, producing a right-side-up trapezoid in [[SVG Essentials/Transforming the Coordinate System#svgess-CHP-5-FIG-14|Figure 5-14]].

<div id="svgess-CHP-5-EX-8">
'''Example 5-8. Transformed Cartesian coordinates'''

<svg width="200px" height="200px" viewBox="0 0 200 200">
'''<g transform="translate(0,100) scale(1,-1)">'''

<line x1="0" y1="0" x2="100" y2="0" style="stroke: black;"/>
<line x1="0" y1="0" x2="0" y2="100" style="stroke: black;"/>


<polygon points="40 40, 100 40, 70 70, 40 70"
style="fill: gray; stroke: black;"/>
'''</g>'''
</svg>
</div>

<div id="svgess-CHP-5-FIG-14">
'''Figure 5-14. Transformed Cartesian coordinates'''

[[Image:SVG Essentials/I_5_tt90.png|Transformed Cartesian coordinates]]
</div>

== The rotate Transformation ==

It is also possible to rotate the coordinate system by a specified angle. In the default coordinate system, angle measure increases as you rotate clockwise, with a horizontal line having an angle of zero degrees, as shown in [[SVG Essentials/Transforming the Coordinate System#svgess-CHP-5-FIG-15|Figure 5-15]].

<div id="svgess-CHP-5-FIG-15">
'''Figure 5-15. Default measurement of angles'''

[[Image:SVG Essentials/I_5_tt91.png|Default measurement of angles]]
</div>

Unless you specify otherwise, the center of rotation (a fancy term for the "pivot point") is presumed to be (0, 0). [[SVG Essentials/Transforming the Coordinate System#svgess-CHP-5-EX-9|Example 5-9]] shows a square drawn in gray, then drawn again in black after the coordinate system is rotated 45 degrees. The axes are also shown as a guide. [[SVG Essentials/Transforming the Coordinate System#svgess-CHP-5-FIG-16|Figure 5-16]] shows the result. If you're surprised that the square has appeared to move, you shouldn't be. Remember, the entire coordinate system has been rotated, as shown in [[SVG Essentials/Transforming the Coordinate System#svgess-CHP-5-FIG-17|Figure 5-17]].<ref>All the figures in this chapter are static pictures. This one shows two squares; one rotated and one unrotated. To show an animation of a rotating square, use <tt><animateTransform></tt>, which we will discuss in [[SVG Essentials/Animating and Scripting SVG|Chapter 11]], in [[SVG Essentials/Animating and Scripting SVG#The animateTransform Element|Section 11.6]].</ref>

<div id="svgess-CHP-5-EX-9">
'''Example 5-9. Rotation around the origin'''


<polyline points="100 0, 0 0, 0 100" style="stroke: black; fill: none;"/>


<rect x="70" y="30" width="20" height="20" style="fill: gray;"/>
<rect x="70" y="30" width="20" height="20"
transform="rotate(45)" style="fill: black;"/>
</div>

<div id="svgess-CHP-5-FIG-16">
'''Figure 5-16. Result of rotation around the origin'''

[[Image:SVG Essentials/I_5_tt92.png|Result of rotation around the origin]]
</div>

<div id="svgess-CHP-5-FIG-17">
'''Figure 5-17. How rotation around the origin works'''

[[Image:SVG Essentials/I_5_tt93.png|How rotation around the origin works]]
</div>

Most of the time, you will not want to rotate the entire coordinate system around the origin; you'll want to rotate a single object around a point other than the origin. You can do that via this series of transformations: <tt>translate(</tt> <tt>''centerX''</tt> <tt>,</tt> <tt>''centerY''</tt> <tt>)</tt> <tt>rotate(</tt> <tt>''angle''</tt> <tt>)</tt> <tt>translate(-</tt> <tt>''centerX''</tt> <tt>, -</tt> <tt>''centerY''</tt> <tt>)</tt>. SVG provides another version of <tt>rotate</tt> to make this common task easier. In this second form of the <tt>rotate</tt> transformation, you specify the angle and the center point around which you want to rotate:

rotate(''angle'', ''centerX'', ''centerY'')

This has the effect of temporarily establishing a new system of coordinates with the origin at the specified center ''x'' and ''y'' points, doing the rotation, and then re-establishing the original coordinates. [[SVG Essentials/Transforming the Coordinate System#svgess-CHP-5-EX-10|Example 5-10]] shows this form of <tt>rotate</tt> to create multiple copies of an arrow, shown in [[SVG Essentials/Transforming the Coordinate System#svgess-CHP-5-FIG-18|Figure 5-18]].

<div id="svgess-CHP-5-EX-10">
'''Example 5-10. Rotation around a center point'''


<circle cx="50" cy="50" r="3" style="fill: black;"/>


<g id="arrow" style="stroke: black;">
<line x1="60" y1="50" x2="90" y2="50"/>
<polygon points="90 50, 85 45, 85 55"/>
</g>


<use xlink:href="#arrow" transform="rotate(60, 50, 50)"/>
<use xlink:href="#arrow" transform="rotate(-90, 50, 50)"/>
<use xlink:href="#arrow" transform="rotate(-150, 50 50)"/>
</div>

<div id="svgess-CHP-5-FIG-18">
'''Figure 5-18. Result of rotation around a center point'''

[[Image:SVG Essentials/I_5_tt94.png|Result of rotation around a center point]]
</div>

== Technique: Scaling Around a Center Point ==

While it's possible to rotate around a point other than the origin, there is no corresponding capability to <tt>scale</tt> around a point. You can, however, make concentric symbols with a simple series of transformations. To scale an object by a given factor around a center point, do this:

translate(-''centerX*(factor-1)'', -''centerY*(factor-1)'')
scale(''factor'')

You may also want to divide the <tt>stroke-width</tt> by the scaling factor so the outline stays the same width while the object becomes larger. [[SVG Essentials/Transforming the Coordinate System#svgess-CHP-5-EX-11|Example 5-11]] draws the set of concentric rectangles shown in [[SVG Essentials/Transforming the Coordinate System#svgess-CHP-5-FIG-19|Figure 5-19]].<ref>This is also a static picture, a "square bullseye." If you want to show an animation of an expanding square, you'll use <tt><animateTransform></tt>, which we will discuss in [[SVG Essentials/Animating and Scripting SVG|Chapter 11]], in [[SVG Essentials/Animating and Scripting SVG#The animateTransform Element|Section 11.6]].</ref>

<div id="svgess-CHP-5-EX-11">
'''Example 5-11. Scaling around a center point'''


<circle cx="50" cy="50" r="2" style="fill: black;"/>


<g id="box" style="stroke: black; fill: none;">
<rect x="35" y="40" width="30" height="20"/>
</g>

<use xlink:href="#box" transform="translate(-50,-50) scale(2)"
style="stroke-width: 0.5;"/>
<use xlink:href="#box" transform="translate(-75,-75) scale(2.5)"
style="stroke-width: 0.4;"/>
<use xlink:href="#box" transform="translate(-100,-100) scale(3)"
style="stroke-width: 0.33;"/>
</div>

<div id="svgess-CHP-5-FIG-19">
'''Figure 5-19. Result of scaling around a center point'''

[[Image:SVG Essentials/I_5_tt96.png|Result of scaling around a center point]]
</div>

== The skewX and skewY Transformations ==

SVG also has two other transformations: <tt>skewX</tt> and <tt>skewY</tt>, which let you skew one of the axes. The general form is <tt>skewX(</tt> <tt>''angle''</tt> <tt>)</tt> and <tt>skewY(</tt> <tt>''angle''</tt> <tt>)</tt> The <tt>skewX</tt> transformation "pushes" all ''x''-coordinates by the specified angle, leaving ''y''-coordinates unchanged. <tt>skewY</tt> skews the ''y''-coordinates, leaving ''x''-coordinates unchanged, as shown in [[SVG Essentials/Transforming the Coordinate System#svgess-CHP-5-EX-12|Example 5-12]].

<div id="svgess-CHP-5-EX-12">
'''Example 5-12. skewX and skewY'''

'''[1]'''
<g style="stroke: gray; stroke-dasharray: 4 4;">
<line x1="0" y1="0" x2="200" y2="0"/>
<line x1="20" y1="0" x2="20" y2="90"/>
<line x1="120" y1="0" x2="120" y2="90"/>
</g>

<g transform="translate(20, 0)"> '''[2]'''
<g transform="skewX(30)"> '''[3]'''
<polyline points="50 0, 0 0, 0 50" '''[4]'''
style="fill: none; stroke: black; stroke-width: 2;"/>
<text x="0" y="60">skewX</text> '''[5]'''
</g>
</g>

<g transform="translate(120, 0)"> '''[6]'''
<g transform="skewY(30)">
<polyline points="50 0, 0 0, 0 50"
style="fill: none; stroke: black; stroke-width: 2;"/>
<text x="0" y="60">skewY</text>
</g>
</g>
</div>

<tt>'''[1]'''</tt> These dashed lines are drawn in the default coordinate system, before any transformation has occurred.

<tt>'''[2]'''</tt> This will move the entire skewed "package" to the desired location.

<tt>'''[3]'''</tt> Skew the ''x''-coordinates 30 degrees. This transformation doesn't change the origin, which will still be at (0, 0) in the new coordinate system.

<tt>'''[4]'''</tt> To make things easier, we draw the object at the origin.

<tt>'''[5]'''</tt> Text will be covered in more detail in [[SVG Essentials/Text|Chapter 8]].

<tt>'''[6]'''</tt> These elements are organized exactly like the preceding ones, except the ''y''-coordinates are skewed.

Notice that <tt>skewX</tt> leaves the horizontal lines in [[SVG Essentials/Transforming the Coordinate System#svgess-CHP-5-FIG-20|Figure 5-20]] horizontal, and <tt>skewY</tt> leaves the vertical lines untouched. Go figure.

<div id="svgess-CHP-5-FIG-20">
'''Figure 5-20. Result of skewX and skewY transformations'''

[[Image:SVG Essentials/I_5_tt97.png|Result of skewX and
skewY transformations]]
</div>

== Transformation Reference Summary ==

[[SVG Essentials/Transforming the Coordinate System#svgess-CHP-5-TABLE-1|Table 5-1]] gives a quick summary of the transformations available in SVG.

<div id="svgess-CHP-5-TABLE-1">
'''Table 5-1. SVG transformations'''

{| border="1"
|-
! Transformation !! Description
|-
| <tt>translate(</tt><tt>''x''</tt><tt>,</tt><tt>''y''</tt><tt>)</tt> || Moves the user coordinate system by the specified <tt>''x''</tt> and <tt>''y''</tt> amounts. Note: If you don't specify a <tt>''y''</tt> value, zero is assumed.
|-
| <tt>scale(</tt><tt>''xFactor''</tt><tt>,</tt><tt>''yFactor''</tt><tt>)</tt> || Multiplies all user coordinate systems by the specified <tt>''xFactor''</tt> and <tt>''yFactor''</tt>. The factors may be fractional or negative.
|-
| <tt>scale(</tt><tt>''factor''</tt><tt>)</tt> || Same as <tt>scale(</tt><tt>''factor''</tt><tt>,</tt><tt>''factor''</tt><tt>)</tt>.
|-
| <tt>rotate(</tt><tt>''angle''</tt><tt>)</tt> || Rotates the user coordinate by the specified <tt>''angle''</tt>. The center of rotation is the origin (0, 0). In the default coordinate system, angle measure increases as you rotate clockwise, with a horizontal line having an angle of zero degrees.
|-
| <tt>rotate(</tt><tt>''angle''</tt><tt>,</tt><tt>''centerX''</tt><tt>,</tt><tt>''centerY''</tt><tt>)</tt> || Rotates the user coordinate by the specified <tt>''angle''</tt>. <tt>''centerX''</tt> and <tt>''centerY''</tt> specify the center of rotation.
|-
| <tt>skewX(</tt><tt>''angle''</tt><tt>)</tt> || Skews all ''x''-coordinates by the specified <tt>''angle''</tt>. Visually, this makes vertical lines appear at an angle.
|-
| <tt>skewY(</tt><tt>''angle''</tt><tt>)</tt> || Skews all ''y''-coordinates by the specified <tt>''angle''</tt>. Visually, this makes horizontal lines appear at an angle.
|}
</div>
== Notes ==

<references/>