files/es/web/svg/attribute/transform/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144

---
title: transform
slug: Web/SVG/Attribute/transform
translation_of: Web/SVG/Attribute/transform
---
<p>« Indice de atributos SVG</p>

<p>El atributo <code>transform</code> 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.</p>

<h2 id="Contexto_de_uso">Contexto de uso</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Categorias</th>
   <td>None</td>
  </tr>
  <tr>
   <th scope="row">Valor</th>
   <td><strong title="this is the default value">&lt;transform-list&gt;</strong></td>
  </tr>
  <tr>
   <th scope="row">Animable</th>
   <td>Yes</td>
  </tr>
  <tr>
   <th scope="row">Documento normativo</th>
   <td><a class="external" href="http://www.w3.org/TR/SVG/coords.html#TransformAttribute" title="http://www.w3.org/TR/SVG/coords.html#TransformAttribute">SVG 1.1 (2nd Edition)</a></td>
  </tr>
 </tbody>
</table>

<h3 id="Tipos_de_definiciones_de_transformación">Tipos de definiciones de transformación</h3>

<dl>
 <dt>matrix(&lt;a&gt; &lt;b&gt; &lt;c&gt; &lt;d&gt; &lt;e&gt; &lt;f&gt;)</dt>
 <dd>Esta definición de tranformación, especifica una transformación en forma de una matriz de transformación de seis valores. <code>matrix(a,b,c,d,e,f)</code> es equivalente a aplicar la siguiente matriz de transformación:<math display="block"><semantics><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><annotation encoding="TeX">\begin{pmatrix} a &amp; c &amp; e \\ b &amp; d &amp; f \\ 0 &amp; 0 &amp; 1 \end{pmatrix}</annotation></semantics></math> que mapea las coordinadas desde un nuevo sistema de coordenadas a un sistema existente mediante la siguiente matriz de igualdades:<math display="block"><semantics><mrow><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mo>=</mo><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mo>=</mo><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>c</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>d</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>f</mi></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow></mrow><annotation encoding="TeX"> \begin{pmatrix} x_{\mathrm{prevCoordSys}} \\ y_{\mathrm{prevCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a &amp; c &amp; e \\ b &amp; d &amp; f \\ 0 &amp; 0 &amp; 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} </annotation></semantics></math></dd>
 <dt>translate(&lt;x&gt; [&lt;y&gt;])</dt>
 <dd>Esta definición de transformación, especifica la transición en <code>x</code> e <code>y</code>. Es equivalente a: <code>matrix(1 0 0 1 x y)</code>. Si no se provee ningun valor de  <code>y</code> , éste se asume como cero.</dd>
 <dt>scale(&lt;x&gt; [&lt;y&gt;])</dt>
 <dd>Esta definición de transformación, especifica la escala de operación en <code>x</code> e <code>y</code>. Es equivalente a: <code>matrix(x 0 0 y 0 0)</code>. Si no se provee ningun valor de  <code>y</code> , éste se asume igual a <code>x.</code></dd>
 <dt>rotate(&lt;a&gt; [&lt;x&gt; &lt;y&gt;])</dt>
 <dd>Esta definición de transformación, especifica la rotación en <code>a</code> grados a partir del punto dado. Si los parámetros opcionales  <code>x</code> e <code>y</code> 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:<math display="block"><semantics><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mo lspace="0em" rspace="0em">cos</mo><mi>a</mi></mtd><mtd><mo>-</mo><mo lspace="0em" rspace="0em">sin</mo><mi>a</mi></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mo lspace="0em" rspace="0em">sin</mo><mi>a</mi></mtd><mtd><mo lspace="0em" rspace="0em">cos</mo><mi>a</mi></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><annotation encoding="TeX">\begin{pmatrix} \cos a &amp; -\sin a &amp; 0 \\ \sin a &amp; \cos a &amp; 0 \\ 0 &amp; 0 &amp; 1 \end{pmatrix}</annotation></semantics></math> Si se proveen los parámetros opcionales <code>x</code> e <code>y</code> , la rotación se produce en el punto provisto <code>(x, y)</code>. La operación representa el equivalente a la siguiente lista de transformaciones: <code>translate(&lt;x&gt;, &lt;y&gt;) rotate(&lt;a&gt;) translate(-&lt;x&gt;, -&lt;y&gt;)</code>.</dd>
 <dt>skewX(&lt;a&gt;)</dt>
 <dd>This transform definition specifies a skew transformation along the x axis by <code>a</code> degrees. The operation corresponds to the matrix <math display="block"><semantics><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mn>1</mn></mtd><mtd><mo lspace="0em" rspace="0em">tan</mo><mo stretchy="false">(</mo><mi>a</mi><mo stretchy="false">)</mo></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><annotation encoding="TeX">\begin{pmatrix} 1 &amp; \tan(a) &amp; 0 \\ 0 &amp; 1 &amp; 0 \\ 0 &amp; 0 &amp; 1 \end{pmatrix}</annotation></semantics></math></dd>
 <dt> </dt>
 <dt>skewY(&lt;a&gt;)</dt>
 <dd>This transform definition specifies a skew transformation along the y axis by <code>a</code> degrees. The operation corresponds to the matrix <math display="block"><semantics><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mo lspace="0em" rspace="0em">tan</mo><mo stretchy="false">(</mo><mi>a</mi><mo stretchy="false">)</mo></mtd><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><annotation encoding="TeX"> \begin{pmatrix} 1 &amp; 0 &amp; 0 \\ \tan(a) &amp; 1 &amp; 0 \\ 0 &amp; 0 &amp; 1 \end{pmatrix} </annotation></semantics></math></dd>
</dl>

<h2 id="Example">Example</h2>

<h3 id="Rotating_and_Translating_an_SVG_element">Rotating and Translating an SVG element</h3>

<p>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.</p>

<p>CSS (optional):</p>

<pre class="brush: css">text {
  font: 1em sans-serif;
}</pre>

<p>SVG:</p>

<pre class="brush: html">&lt;svg width="180" height="200"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"&gt;

  &lt;!-- This is the element before translation and rotation are applied --&gt;
  &lt;rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2"<strong> </strong>fill-opacity=0.2 stroke-opacity=0.2&gt;&lt;/rect&gt;

  &lt;!-- Now we add a text element and apply rotate and translate to both --&gt;
  &lt;rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2"<strong> transform="translate(30) rotate(45 50 50)"</strong>&gt;&lt;/rect&gt;
  &lt;text x="60" y="105" <strong>transform="translate(30) rotate(45 50 50)"</strong>&gt; Hello Moz! &lt;/text&gt;

&lt;/svg&gt;
</pre>

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

<h3 id="General_Transformation" name="General_Transformation">General Transformation</h3>

<p>Here is a basic example to understand a general transformation. We consider the transform <code>matrix(1,2,3,4,5,6)</code> 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.</p>

<pre class="brush: html">&lt;svg width="160" height="230" xmlns="http://www.w3.org/2000/svg"&gt;

  &lt;g transform="matrix(1,2,3,4,5,6)"&gt;
    &lt;!-- New coordinate system (thick blue line)
         x1 = 10 | x2 = 30
         y1 = 20 | y2 = 40
      --&gt;
    &lt;line x1="10" y1="20" x2="30" y2="40" style="stroke-width: 10px; stroke: blue;"/&gt;
  &lt;/g&gt;

  &lt;!-- 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
    --&gt;
  &lt;line x1="75" y1="106" x2="155" y2="226" style="stroke-width: 1px; stroke: white;"/&gt;

&lt;/svg&gt;
</pre>

<p>{{ EmbedLiveSample('General_Transformation','200px','250px') }}</p>

<h3 id="Illustration_of_Text_at_the_Same_Position_Rotated_Around_Different_Points">Illustration of Text at the Same Position Rotated Around Different Points</h3>

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

<pre class="brush: html">&lt;svg viewBox="-20 -20 820 420" xmlns="http://www.w3.org/2000/svg" width="800" height="400"&gt;

  &lt;text x="200" y="0"&gt;...unrotated text; same starting position as examples below (in all cases: x="200" y="0")&lt;/text&gt;

  &lt;circle cx="200" cy="0" r="2" style="stroke: green; stroke-width: 1; fill: green;" /&gt;
  &lt;text x="200" y="0" transform="rotate(45 200,0)" style="fill: green;" &gt;...(1) rotate(45 200,0) (rotated 45° around a point at 200,0)&lt;/text&gt;

  &lt;circle cx="100" cy="0" r="2" style="stroke: blue; stroke-width: 1; fill: blue;" /&gt;
  &lt;path d="M 200,0 A 100,100 0 0,1 0,0" style="stroke: blue; stroke-width: 1; fill: transparent;" /&gt;
  &lt;text x="200" y="0" transform="rotate(45 100,0)" style="fill: blue;"&gt;...(2) rotate(45 100,0) (rotated 45° around a point at 100,0)&lt;/text&gt;

  &lt;circle cx="0" cy="0" r="2" style="stroke: red; stroke-width: 1; fill: red;" /&gt;
  &lt;path d="M 200,0 A 200,200 0 0,1 0,200" style="stroke: red; stroke-width: 1; fill: transparent;" /&gt;
  &lt;text x="200" y="0" transform="rotate(45 0,0)" style="fill: red;" &gt;...(3) rotate(45 0,0) (rotated 45° around a point at 0,0)&lt;/text&gt;

&lt;/svg&gt;
</pre>

<p>{{EmbedLiveSample("Illustration_of_Text_at_the_Same_Position_Rotated_Around_Different_Points", 800, 400)}}</p>

<h2 id="Elements">Elements</h2>

<p>The following elements can use the <code>transform</code> attribute:</p>

<ul>
 <li>{{ SVGElement("a") }}</li>
 <li>{{ SVGElement("clipPath") }}</li>
 <li>{{ SVGElement("defs") }}</li>
 <li>{{ SVGElement("foreignObject") }}</li>
 <li>{{ SVGElement("g") }}</li>
 <li>{{ SVGElement("switch") }}</li>
 <li>{{ SVGElement("use") }}</li>
 <li>{{ SVGElement("svg") }} (SVG 2 onwards)</li>
 <li><a href="/en/SVG/Element#Graphics" title="en/SVG/Element#Graphics">Graphics elements</a> »</li>
</ul>