transform
=========

« Indice de atributos SVG

El atributo `transform` exhibe una lista de definiciones de transformación que se aplican a un elemento y a sus hijos. Los elementos en la lista de tranformación están separados por espacios en blanco y/o comas y se aplican de derecha a izquierda.

Contexto de uso
---------------

| Categorias | None |
| --- | --- |
| Valor | **`<transform-list>`** |
| Animable | Yes |
| Documento normativo | SVG 1.1 (2nd Edition) |

### Tipos de definiciones de transformación

matrix(<a> <b> <c> <d> <e> <f>)

Esta definición de tranformación, especifica una transformación en forma de una matriz de transformación de seis valores. `matrix(a,b,c,d,e,f)` es equivalente a aplicar la siguiente matriz de transformación:


(

a

c

e

b

d

f

0

0

1

)

\begin{pmatrix} a & c & e \ b & d & f \ 0 & 0 & 1 \end{pmatrix}

 que mapea las coordinadas desde un nuevo sistema de coordenadas a un sistema existente mediante la siguiente matriz de igualdades:


(

x

p
r
e
v
C
o
o
r
d
S
y
s



y

p
r
e
v
C
o
o
r
d
S
y
s


1

)

=

(

a

c

e

b

d

f

0

0

1

)

(

x

n
e
w
C
o
o
r
d
S
y
s



y

n
e
w
C
o
o
r
d
S
y
s


1

)

=

(

a

x

n
e
w
C
o
o
r
d
S
y
s

+
c

y

n
e
w
C
o
o
r
d
S
y
s

+
e

b

x

n
e
w
C
o
o
r
d
S
y
s

+
d

y

n
e
w
C
o
o
r
d
S
y
s

+
f

1

)

 \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>])

Esta definición de transformación, especifica la transición en `x` e `y`. Es equivalente a: `matrix(1 0 0 1 x y)`. Si no se provee ningun valor de `y` , éste se asume como cero.

scale(<x> [<y>])

Esta definición de transformación, especifica la escala de operación en `x` e `y`. Es equivalente a: `matrix(x 0 0 y 0 0)`. Si no se provee ningun valor de `y` , éste se asume igual a `x.`

rotate(<a> [<x> <y>])

Esta definición de transformación, especifica la rotación en `a` grados a partir del punto dado. Si los parámetros opcionales `x` e `y` no se proveen, la rotación se produce en el origen del actual sistema de coordenadas del usuario. Esta operación se corresponde con la matriz:


(

cos
a

-
sin
a

0

sin
a

cos
a

0

0

0

1

)

\begin{pmatrix} \cos a & -\sin a & 0 \ \sin a & \cos a & 0 \ 0 & 0 & 1 \end{pmatrix}

 Si se proveen los parámetros opcionales `x` e `y` , la rotación se produce en el punto provisto `(x, y)`. La operación representa el equivalente a la siguiente lista de transformaciones: `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 


(

1

tan
(
a
)

0

0

1

0

0

0

1

)

\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 


(

1

0

0

tan
(
a
)

1

0

0

0

1

)

 \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):


```css
text {
  font: 1em sans-serif;
}
```


SVG:


```html
<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.


```html
<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.


```html
<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:

* `<a>`
* `<clipPath>` (en-US)
* `<defs>` (en-US)
* `<foreignObject>` (en-US)
* `<g>`
* `<switch>` (en-US)
* `<use>`
* `<svg>` (SVG 2 onwards)
* Graphics elements »