transform

« SVG Attribute reference home

The transform attribute defines a list of transform definitions that are applied to an element and the element's children. The items in the transform list are separated by whitespace and/or commas, and are applied from right to left.

Usage context

Categories	None
Value	<transform-list>
Animatable	Yes
Normative document	SVG 1.1 (2nd Edition)

Types of transform definition

matrix(<a> <b> <c> <d> <e> <f>): This transform definition specifies a transformation in the form of a transformation matrix of six values. matrix(a,b,c,d,e,f) is equivalent to applying the transformation matrix $\begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix}$ which maps coordinates from a new coordinate system into a previous coordinate system by the following matrix equalities: $\begin{pmatrix} x_{\mathrm{prevCoordSys}} \\ y_{\mathrm{prevCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x_{\mathrm{newCoordSys}} \\ y_{\mathrm{newCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{newCoordSys}} + c y_{\mathrm{newCoordSys}} + e \\ b x_{\mathrm{newCoordSys}} + d y_{\mathrm{newCoordSys}} + f \\ 1 \end{pmatrix}$
translate(<x> [<y>]): This transform definition specifies a translation by x and y. This is equivalent to matrix(1 0 0 1 x y). If y is not provided, it is assumed to be zero.
scale(<x> [<y>]): This transform definition specifies a scale operation by x and y. This is equivalent to matrix(x 0 0 y 0 0). If y is not provided, it is assumed to be equal to x.
rotate(<a> [<x> <y>]): This transform definition specifies a rotation by a degrees about a given point. If optional parameters x and y are not supplied, the rotate is about the origin of the current user coordinate system. The operation corresponds to the matrix $\begin{pmatrix} \cos a & -\sin a & 0 \\ \sin a & \cos a & 0 \\ 0 & 0 & 1 \end{pmatrix}$ If optional parameters x and y are supplied, the rotate is about the point (x, y). The operation represents the equivalent of the following transform definitions list: translate(<x>, <y>) rotate(<a>) translate(-<x>, -<y>).
skewX(<a>): This transform definition specifies a skew transformation along the x axis by a degrees. The operation corresponds to the matrix $\begin{pmatrix} 1 & \tan(a) & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{pmatrix}$

skewY(<a>): This transform definition specifies a skew transformation along the y axis by a degrees. The operation corresponds to the matrix $\begin{pmatrix} 1 & 0 & 0 \\ \tan(a) & 1 & 0 \\ 0 & 0 & 1 \end{pmatrix}$

Example

Rotating and Translating an SVG element

In this simple example we rotate and translate (move) an SVG element using transform SVG attribute. The original element before transform is shown with a low opacity.

CSS (optional):

text {
  font: 1em sans-serif;
}

SVG:

<svg width="180" height="200"
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- This is the element before translation and rotation are applied -->
  <rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2" fill-opacity=0.2 stroke-opacity=0.2></rect>
  <!-- Now we add a text element and apply rotate and translate to both -->
  <rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2" transform="translate(30) rotate(45 50 50)"></rect>
  <text x="60" y="105" transform="translate(30) rotate(45 50 50)"> Hello Moz! </text>
</svg>

Screenshot	Live sample

General Transformation

Here is a basic example to understand a general transformation. We consider the transform matrix(1,2,3,4,5,6) and draw a thick blue line from (10,20) to (30,40) in the new coordinate system. A thin white line with the same end points is drawn above it using the original coordinate system.

<svg width="160" height="230" xmlns="http://www.w3.org/2000/svg">
  <g transform="matrix(1,2,3,4,5,6)">
    <!-- New coordinate system (thick blue line)
         x1 = 10 | x2 = 30
         y1 = 20 | y2 = 40
      -->
    <line x1="10" y1="20" x2="30" y2="40" style="stroke-width: 10px; stroke: blue;"/>
  </g>
  <!-- Previous coordinate system (thin white line)
       x1 = 1 * 10 + 3 * 20 + 5 = 75  | x2 = 1 * 30 + 3 * 40 + 5 = 155
       y1 = 2 * 10 + 4 * 20 + 6 = 106 | y2 = 2 * 30 + 4 * 40 + 6 = 226
    -->
  <line x1="75" y1="106" x2="155" y2="226" style="stroke-width: 1px; stroke: white;"/>
</svg>

Illustration of Text at the Same Position Rotated Around Different Points

All text examples in the SVG below have the same positioning on the page (x="200" y="0"), and all are rotated at 45°. The only difference is the point that anchors the rotation.

<svg viewBox="-20 -20 820 420" xmlns="http://www.w3.org/2000/svg" width="800" height="400">
  <text x="200" y="0">...unrotated text; same starting position as examples below (in all cases: x="200" y="0")</text>
  <circle cx="200" cy="0" r="2" style="stroke: green; stroke-width: 1; fill: green;" />
  <text x="200" y="0" transform="rotate(45 200,0)" style="fill: green;" >...(1) rotate(45 200,0) (rotated 45° around a point at 200,0)</text>
  <circle cx="100" cy="0" r="2" style="stroke: blue; stroke-width: 1; fill: blue;" />
  <path d="M 200,0 A 100,100 0 0,1 0,0" style="stroke: blue; stroke-width: 1; fill: transparent;" />
  <text x="200" y="0" transform="rotate(45 100,0)" style="fill: blue;">...(2) rotate(45 100,0) (rotated 45° around a point at 100,0)</text>
  <circle cx="0" cy="0" r="2" style="stroke: red; stroke-width: 1; fill: red;" />
  <path d="M 200,0 A 200,200 0 0,1 0,200" style="stroke: red; stroke-width: 1; fill: transparent;" />
  <text x="200" y="0" transform="rotate(45 0,0)" style="fill: red;" >...(3) rotate(45 0,0) (rotated 45° around a point at 0,0)</text>
</svg>

Elements

The following elements can use the transform attribute: