initial commit

1 files changed, 144 insertions, 0 deletions

diff --git a/files/es/web/svg/attribute/transform/index.html b/files/es/web/svg/attribute/transform/index.html
new file mode 100644
index 0000000000..0d225d06b8
--- /dev/null
+++ b/files/es/web/svg/attribute/transform/index.html
@@ -0,0 +1,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>