From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/svg/attribute/transform/index.html | 144 ++++++++++++++++++++++++ 1 file changed, 144 insertions(+) create mode 100644 files/es/web/svg/attribute/transform/index.html (limited to 'files/es/web/svg/attribute/transform') 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 +--- +

« 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

+ + + + + + + + + + + + + + + + + + + + +
CategoriasNone
Valor<transform-list>
AnimableYes
Documento normativoSVG 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:(acebdf001)\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:(xprevCoordSysyprevCoordSys1)=(acebdf001)(xnewCoordSysynewCoordSys1)=(axnewCoordSys+cynewCoordSys+ebxnewCoordSys+dynewCoordSys+f1) \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:(cosa-sina0sinacosa0001)\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 (1tan(a)0010001)\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 (100tan(a)10001) \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>
+
+ +

{{ EmbedLiveSample('General_Transformation','200px','250px') }}

+ +

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:

+ + -- cgit v1.2.3-54-g00ecf