2008 Dec 22
| translate | scale | rotate | skewX | skewY |
| multiple transforms |
The x and y attributes of the <use> element give a simple translation mechanism, and are a short hand for the more general form of:
<g id="thing">...</g> <use xlink:href="thing" transform="translate(20.2,40)"/>where 20.2 is the x value and 40 is the y value.
The size of an object can be altered with the scale transform which has two signatures:
transform="scale(mval)"which multiplies all x and y coordinates by mval.
transform="scale(x-mval,y-mval)"which multiplies all x coordinates by x-mval and all y coordinates by y-mval.
Note that scale() will effect stroke-thinkness because of the change in user coordinates.
The angular coordinate system in in degrees and has 0 degrees in the plus X direction (rightward), and then clockwise from there. Thus 90 degrees is in the plus Y direction (downward). Unless specified otherwise, the center of rotation is at the origin (0,0). Example:
<g id="thing">...</g> <use xlink:href="thing" transform="rotate(36)"/>The more general form is:
transform="rotate(angle,x-ctr,y-ctr)"
The following causes all x-coordinates to be skewed by angle, which leaves horizontal lines unchanged an vertical rotated with respect to the origin.
transform="skewX(angle)"
The following causes all y-coordinates to be skewed by angle, which leaves vertical lines unchanged and horizontal lines rotated with respect to the origin.
transform="skewY(angle)"
Multiple transforms for an object can be specified by having them be space separated as in the following example:
<g id="thing">...</g> <use xlink:href="thing" transform="scale(3.1415) translate(20.2,40)"/>which is equivalent to:
<g transform="scale(3.1415)">
<g translate(20.2,40)"/> ...
</g>
</g>
To scale by a factor f around a point x y other than the origin do:
translate(-x*(f-1),-y*(f-1)) scale(f)It is also recommended to divide stroke-width by f.