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:(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 xy. 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>

ScreenshotLive 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.

<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>

Elements

The following elements can use the transform attribute: