Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

SVG en HTML5

SVG: dibujos y gráficos mediante vectores escalables.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 122

Visitas el mes pasado: 219

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


tutorial SVG
W3Scools
Using SVG with HTML5 tutorial
Alejandro Castillo Cantón
Agregar SVG a una página web
msdn.microsoft.com
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
W3C Recommendation 16 August 2011
Introducción a SVG
http://sabia.tic.udc.es

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




SVG (VIII)

Transformaciones

imagen html5

Definición

La transformación es un efecto que permite a un elemento o conjunto de elementos cambiar de tamaño, forma o posición.

El elemento cambia respecto a su estado original, lo que nos permite entre otras cosas realizar animaciones, pero eso lo veremos más adelante.

Si conoces canvas de HTML5 o la animación en CSS3 seguramente sabrás lo que son las transformaciones. En SVG se realizan de forma parecida a CSS3, de hecho los métodos usados para las transformaciones son los mismos que en CSS3.

Para realizar una transformación utilizaremos el atributo transform al cual le aplicaremos como valor los distintos métodos.


Traslación

el método translate permite realizar un desplazamiento del elemento respecto a su posición original.

Para ello utilizaremos el atributo transform en el elemento que queramos trasladar.

transform="translate(x,y)

Original Transalte

donde "x" e "y" indicará el desplazamiento horizontal y vertical respectivamente que tendrá el elemento.

Si queremos trasladar un conjunto de elementos, basta con ponerlos todos dentro de una etiqueta <g> ... </g>, a la cual le aplicaremos la transformación.

En el ejemplo de la derecha hemos hecho un primer cuadrado con un texto dentro. Repetimos este cuadrado con el texto (que aquí lo hemos cambiado), y hemos hecho una traslación del cuadrado y su texto (Usamos la etiqueta "g" que engloba los dos elementos).

El código de este ejemplo muestra cómo la copia se ha trasladado al incluir la traslación:

<svg width="270" height="200">
<g>
  <rect x="10" y="10" width="80" height="80" fill="orange"/>
  <text x="20" y="50" style="font: bold 0.8em arial; fill: purple;">
    Original</text>
</g>
<g transform="translate(150,80)">
  <rect x="10" y="10" width="80" height="80" fill="orange"/>
  <text x="20" y="50" style="font: bold 0.8em arial; fill: purple;">
    Transalte</text>
</g>
</svg>


Escalado

Este método de transformación consiste en reducir o ampliar el elemento al que se le aplica. para ello se utiliza el método scale

Como en el método anterior utilizamos el atributo transform con el siguiente valor:

transform="scale(sx,xy)"(

Original Scale 1 Scale 2

en donde sx y sy es el valor que indica las veces que se amplia o reduce el elemento en la coordenada "x" e "y". El 1 indica el tamaño del elemento, por debajo de 1 el elemento se reduce (por ejemplo 0.5 reduce el tamaño a la mitad, y por encima de 1 el elemento se agranda (por ejemplo 1.5 amplia el elemento en un 50%).

También podemos ampliar o reducir en los dos ejes de coordenadas al mismo tiempo si dentro del paréntesis ponemos un sólo valor:

translate="scale(0.5)"

El ejemplo puesto en la línea anterior reduce el tamaño a la mitad tanto para la coordenada "x" como para la coordenada "y", conservado así las proporciones originales.

El cuadro de ejemplo de la derecha tiene tres cuadrados que en principio tienen el mismo tamaño, pero los hemos modificado con un escalado. Su código es el siguiente:

<svg width="270" height="200">
<g>
<rect x="10" y="10" width="80" height="80" fill="orange"/>
<text x="20" y="50" style="font: bold 0.8em arial; fill: purple;">
   Original</text>
</g>
<g transform="scale(0.8,0.6)">
  <rect x="180" y="30" width="80" height="80" fill="orange"  />
  <text x="200" y="80" style="font: bold 0.8em arial; fill: purple;">
    Scale 1</text>
</g>
<g transform="scale(1.2)">
  <rect x="100" y="80" width="80" height="80" fill="orange"  />
  <text x="120" y="130" style="font: bold 0.8em arial; fill: purple;">
    Scale 2</text>
</g>
</svg>


El escalado se produce también en las medidas que sitúan las figuras en el contenedor, lo cual lo debemos de tener en cuenta para que se vean en el sitio que queremos.


Cambiar el origen de coordenadas

A veces puede interesarnos cambiar el origen de coordenadas para algunos elementos, como en el método de rotación que veremos a continuacion, ya que el elemento gira tomando como eje el origen de coordenadas, para ello englobamos todos los elementos en una etiqueta g a la que le aplicamos el método translate:

<g transform="translate(100,100)">
... elementos con origen de coordenadas en 100,100 ...
</g>

El punto 100,100 será el nuevo origen de coordenadas para todos los elementos que estén dentro de esta etiqueta, esto hay que tenerlo en cuenta al posicionarlos.

Podemos usar también otros métodos para variar otros aspectos de las coordenadas, por ejemplo con scale variamos la distancia entre puntos, o con el método de rotación rotamos los ejes "x" e "y".


Rotación

Este método de transformación consiste en rotar el elemento respecto a su posición original. Utilizamos para ello el método rotate, en el cual indicamos el número de grados que girará el elemento:

transform="rotate(num)"

Tal como se ha indicado anteriormente el elemento gira tomando como eje el origen de coordenadas, por lo que para que para que gire sobre sí mismo debemos cambiarlo. Como hemo visto en el apartado anterior esto se hace con el método translate.

Original Rotate

podemos aplicar los dos métodos (translate y rotate) sobre un mismo elemento. Para aplicar varios métodos sobre un mismo elemento basta con ponerlos separados por comas:

transform="translate(190,75),rotate(60)"

Con translate cambiamos el origen de coordenadas, y con rotate hacemos girar el elemento sobre el nuevo origen de coordenadas.

El giro se produce en el sentido horario. Podemos poner también números negativos en rotate, que producirán un giro en sentido antihorario.

Tenemos aquí a la derecha un ejemplo en el que hemos aplicado lo visto anteriormente para rotar una figura. Su código es el siguiente:

<svg width="270" height="150">
<g >
   <rect x="20" y="25" width="80" height="80" fill="orange"/>
   <text x="30" y="75" style="font: bold 0.8em arial; fill: purple;">
     Original</text>
</g>
<g transform="translate(190,75),rotate(60)">
   <rect x="-40" y="-40" width="80" height="80" fill="orange"/>
   <text x="-20" y="0" style="font: bold 0.8em arial; fill: purple;">
     Rotate</text>
</g>
</svg>


Sesgado

El sesgado se produce con el método skew. Consiste en deformar la figura variando el ángulo de sus coordenadas. El resultado es una inclinación de la misma en el sentido indicado.

Original Skew

En realidad tenemos dos métodos: skewX(num), que indica la inclinación de la figura para el eje "x"; y skewY(num), que indica la inclinación del eje "y". En num escribiremos el número de grados que el eje se inclina.

translate="skewX(15),skewY(30)"

En el ejemplo de la derecha además de los métodos skewX y skewY hemos puesto también los métodos translate y rotate. El código es el siguiente:

<svg width="270" height="150">
<g >
   <rect x="20" y="25" width="80" height="80" fill="orange"/>
   <text x="30" y="75" style="font: bold 0.8em arial; fill: purple;">
     Original</text>
</g>
<g transform="translate(190,75),rotate(45),skewX(15),skewY(15)">
   <rect x="-40" y="-40" width="80" height="80" fill="orange"/>
   <text x="-20" y="0" style="font: bold 0.8em arial; fill: purple;">
     Skew</text>
</g>
</svg>


El método matrix

El método matrix es una combinación de los métodos de traslación, de escalado y de sesgado. Tiene seis parámetros o números dentro del paréntesis.

transform="matrix(a,b,c,d,e,f)"

Original Matrix

Los dos últimos parámetros actúan igual que el método translate de forma que "e" y "f" indican el desplazamiento en los ejes "x" e "y" respectivamente.

Los parámetros primero y cuarto actúan igual que el método scale de forma que el parámetro "a" hace un escalado en el eje "x", y el parámetro "d" hace un escalado en el eje "y".

Los parámetros segundo y tercero actúan como los métodos skew. Aquí el número que debemos indicar no es el número de grados del ángulo sino su tangente. El parámetro "b" inclina el eje "x" un angulo cuya tangente es la indicada. El parámetro "c" hace lo mismo con el eje "y".

El código del ejemplo que se ve a la derecha es el siguiente:

<svg width="270" height="150">
<g >
   <rect x="20" y="25" width="80" height="80" fill="orange"/>
   <text x="30" y="75" style="font: bold 0.8em arial; fill: purple;">
     Original</text>
</g>
<g  transform="matrix(1.2 0.3 -0.9 0.8 190 75)">
   <rect x="-40" y="-40" width="80" height="80" fill="yellow"/>
   <text x="-30" y="0" style="font: bold 0.8em arial; fill: purple;">
     Matrix</text>
</g>
</svg>






En la siguiente página veremos otro elemento imprescindible para poder hacer gráficos SVG con una cierta calidad, las máscaras

Máscaras



Manual de HTML5

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com