--- title: transform slug: Web/SVG/Attribute/transform translation_of: Web/SVG/Attribute/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: $\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: $\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: $\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 $\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>

{{EmbedLiveSample("Rotating_and_Translating_an_SVG_element",200,200,"/files/5217/rotate_and_translate_svg.png.png")}}

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>

{{EmbedLiveSample("Illustration_of_Text_at_the_Same_Position_Rotated_Around_Different_Points", 800, 400)}}

Elements

The following elements can use the transform attribute:

{{ SVGElement("a") }}
{{ SVGElement("clipPath") }}
{{ SVGElement("defs") }}
{{ SVGElement("foreignObject") }}
{{ SVGElement("g") }}
{{ SVGElement("switch") }}
{{ SVGElement("use") }}
{{ SVGElement("svg") }} (SVG 2 onwards)
Graphics elements »