Entendido.

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

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

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

SVG (III)

Dibujar rutas

definir una ruta

Una ruta o camino (path en inglés) es un trazado de una o varias líneas que se hacen una detrás de otra. Es como cuando dibujamos con un lápiz. Aquí vamos indicando el movimiento del lapiz de un punto a otro para trazar el dibujo.

Definir una ruta en SVG se hace mediante la etiqueta path y el atributo d.

<path d="..comandos de la ruta .." />

Además como en las figuras vistas anteriormente debemos poner también los atributos de estilo para poder verlo en pantalla, es decir stroke para el color de las líneas, stroke width para el grosor de las líneas y fill para el color de relleno.

Respecto al color de relleno (atributo fill) hay que indicar que la mayoría de los navegadores ponen por defecto el color negro, por lo que si queremos otro color hay que indicarlo.

Los elementos que pueden trazarse en una ruta no se limitan a simples líneas rectas, sino que podemos poner también varios tipos de curvas.

Al trazar la ruta el lapiz o puntero tiene unas coordenadas determinadas, las cuales vienen indicadas siempre por el último punto que hemos marcado.

Los comandos de la ruta, es decir lo que ponemos como valor del atributo d consiste en un serie de letras. Cada letra indica un tipo de trazado (línea recta, curva, mano alzada, etc) y va seguida de una serie de números que indican la posición y caracteríticas del trazado.

Los comandos que podemos poner en la ruta son las siguientes letras:

• M : El lápiz o puntero se sitúa en la posición indicada.
• L : Traza una línea recta desde la posición actual a la indicada.
• H : Traza una línea recta horizontal desde la posición actual a la indicada.
• V : Traza una línea recta vertical desde la posición actual a la indicada.
• C : Traza una línea curva de Bézier desde la posición actual a la indicada.
• S : Traza una línea curva de Bézier desde la posición actual a la indicada. La curvatura de la línea es aquí la misma que en la anterior línea de Bézier.
• Q : Traza una línea curva cuadrática de Bézier desde la posición actual a la indicada.
• T : Traza una línea curva cuadrática de Bézier desde la posición actual a la indicada. La curvatura de la línea es aquí la misma que en la anterior línea cuatrática de Bézier.
• A : Traza un arco elíptico desde la posición actual a la indicada.
• Z : Cierra la ruta actual.

todos estos comandos pueden escribirse en mayúsculas o en minúsculas. Si escribimos la letra en mayúsculas, se toma una posición absoluta y las coordenadas se miden desde su origen. Si escribimos la letra en minúsculas se toma una posición relativa y las coordenadas se miden desde el último punto que se ha puesto en la ruta.

Cada comando va seguido de una serie de números, llamados parámetros, que idican o bien unas coordenadas o las características del elemento trazado.

Vemos a continuación todo esto de una forma mucho más detallada, explicando estos comandos uno a uno.

Principio y fin de la ruta

Al iniciar una ruta lo normal es que ésta no empiece en el origen de coordenadas, por lo que debemos mover el lápiz a mano alzada hasta el punto de inicio. Para ello utilizamos el comando M.

Los dos números o parámetros que siguen a la letra M son las nuevas coordenadas x e y del lápiz o puntero. El próximo trazo que indiquemos mediante un comando empezará en este punto.

El comando Z cierra la ruta y no lleva parámetros. Es por tanto indiferente escribirlo en mayúscula o en minúscula.

líneas horizontales y verticales.

La línea horizontal se define mediante el comando H. Éste lleva un sólo parámetro que es la nueva posición de coordenada "x". Al ser línea horizontal la coordenada "y" sigue siendo la misma y no hace falta indicarla.

La línea vertical se define mediante el comando V. Éste lleva un sólo parámetro que es la nueva posición de coordenada "y". Al ser línea vertical la coordenada "x" sigue siendo la misma y no hace falta indicarla.

Veamos un ejemplo en el que dibujamos varias líneas horizontales y verticales

<svg width=200 height=200>
<path d="M 25 25 h 50 v 50 h 50 v 50 h 50 v 50 m 0 0 z"
       stroke="navy" stroke-width=3 fill="white"/>
</svg>

Empezamos la ruta posicionando el puntero al principio (M 25 25).

Seguimos trazando la ruta mediante una serie de líneas horizontales y verticales (h 50 v 50 h 50 v 50 h 50 v 50). Al poner los comandos en minúsculas la posición es relativa, por lo que sólo tenemos que marcar la longitud de la línea.

Después volvemos a posicionar el puntero en el último punto (m 0 0 ). Esto es importante antes de cerrar la ruta, ya que si no lo hacemos el puntero volverá automáticamente al principio, trazando una línea de cierre. Fijate que también utilizamos la posición relativa, que con las coordenadas 0 0 deja el puntero en donde estaba.

Por último cerramos la ruta con el comando z.

líneas

Las líneas se dibujan con el comando L. Este lleva dos parámetros que son las coordenadas "x" e "y" del final de la línea respectivamente. El principio de línea viene marcado por la posición actual del puntero. Veamos un ejemplo.

<svg width=200 height=200>
<path d="M 20 25 l 40 150 l 40 -150 l 40 150 l 40 -150 m 0 0 z"
       stroke="navy" stroke-width=3 fill="white"/>
</svg>

Como en el ejemplo anterior empezamos posicionando el puntero al principio de la ruta (M 20 25).

Seguimos indicando una serie de líneas con el comando l (ele minúscula) (l 40 150 l 40 -150 l 40 150 l 40 -150). En cada una de ellas se indican las coordenadas relativas "x" e "y" respecto de la anterior.

Después posicionamos el puntero en el último punto en el que está para que éste no vuelva al inicio al cerrar la ruta (m 0 0).

Y por último cerramos la ruta (z).

Curvas de Bézier

Las curvas de Bezier son un tipo de curvas que se calculan de forma matemática teniendo en cuenta la equidistancia de los puntos inicial y final a dos puntos externos a la misma. El esquema de la izquierda nos da una idea de cómo se forman. Para saber más sobre curvas de Bezier consultar la wikipedia en http://es.wikipedia.org/wiki/Curva_de_B%C3%A9zier.

Nosotros sólo necesitamos saber los puntos de principio y final y los dos puntos externos para trazarla, y ésto es lo que indicaremos en el comando C que traza la curva.

El comando C lleva 6 parámetros. Los dos primeros son las coordenadas "x" e "y" del primer punto externo a la curva. Los dos siguientes son las coordenadas "x" e "y" del segundo punto externo a la curva. Los dos últimos son las coordenadas del punto final de la curva.

El punto de inicio de la curva no hay que marcarlo ya que será el punto actual del puntero o lápiz.

Visto esto vamos a ver un ejemplo de curva de Bezier.

<svg width=200 height=200>
<path d="M 10 150 C 30 1  170 50 190 150 M 190 150 z"
      stroke="navy" stroke-width=3 fill="white"  />
</svg>

En primer lugar marcamos el punto inicial posicionando el puntero al principio de la ruta (M 10 150). Es aquí donde empezará la curva.

Seguimos después con la curva (C 30 1 170 50 190 150). Los dos primeros números (30 1) marcan las coordenadas "x" e "y" del primer punto externo. Los dos números siguentes (170 50) son las coordenadas del segundo punto externo. Los dos últimos números (190 150) son el punto final donde acaba la curva.

Movemos el puntero dejándolo en el final de la curva, para que éste no vuelva al principio al cerrar la ruta (M 190 150).

Por último cerramos la ruta con el comando z.

Curva de Bézier con reflejo

El comando S se usa para trazar una segunda curva de Bezier con posicion relativa del primer punto externo análoga al de la curva anterior. Veamos un ejemplo.

<svg width=200 height=200>
<path d="M 10 100 C 1 1 199 1  100 100 S 199 199 190 100  M 190 100 z"
        stroke="navy" stroke-width=3 fill="white" />
</svg>

Como en el ejemplo anterior posicionamos primero el puntero (M 10 100) y después dibujamos una curva de Bezier (C 1 1 199 1 100 100).

Dibujamos después una segunda curva con el comando S (S 199 199 190 100). Los dos primeros números corresponden a las coordenadas del segundo punto externo de la curva y dos dos últimos a las coordenadas del punto final.

El principio de la curva viene dado por el final de la anterior, y el primer punto externo se calcula automáticamente en función de la primera curva para hacer que el paso de una curva a otra sea de una manera continua y sin esquinas.

Por último, como en los ejemplos anteriores posicionamos el puntero en el último punto (M 190 100) y cerramos la ruta (z).

Curvas cuadráticas de Bézier

Como una variante de las curvas de Bezier están las curvas cuadráticas de Bézier. Estas son más simples ya que sólo tienen un punto externo de referencia. Aquí la izquierda vemos un esquema de cómo se forman. Para más información sobre este tipo de curvas podemos consultar la página de wikipedia indicada anteriormente para las curvas de Bézier.

En SVG las curvas cuadráticas de Bézier se dibujan en la ruta con el comando Q. Este comando lleva 4 parámetros. Los dos primeros son el punto externo y los dos últimos el punto final de la curva. Vemos aquí un ejemplo.

<svg width=200 height=200>
<path d="M 10 100 Q 200 0 100 190 M 100 190 z"
        stroke="navy" stroke-width=3 fill="white"/>
</svg>

Como en ejemplos anteriores empezamos posicionando el puntero en el primer punto de la curva (M 10 100).

Seguimos trazando la curva cuadrática (Q 200 0 100 190) los dos primeros números son las coordenadas "x" e "y" del punto externo. Los otros dos números son las coordenadas "x" e "y" del punto final de la curva.

Para acabar posicionamos el puntero en el último punto (M 100 190) y cerramos la ruta (z).

Curvas cuadráticas con reflejo

El comando T se utiliza para dibujar una segunda curva cuadrática que será un reflejo de la anterior. No necesitamos poner el punto externo ya que éste se calcula automáticamente en función de la curva anterior. Veamos un ejemplo.

<svg width=200 height=200>
<path d="M 10 100 Q 50 -50  100 100 T 190 100  M 190 100 z"
      stroke="navy" stroke-width=3 fill="white" />
</svg>

En primer lugar posicionamos el puntero en el punto de inicio (M 10 100) y dibujamos una primera curva cuadrática (Q 50 -50 100 100).

Después dibujamos una segunda curva reflejo de la anterior (T 190 100). Los dos números que ponemos son las coordenadas "x" e "y" del punto final de la curva.

El punto inicial viene dado por la posición del puntero, y el punto exterior de la curva se calcula en función del punto anterior. Es por eso que sólo tenemos que poner el punto final.

Por último cerramos la ruta tal como hemos hecho en los ejemplos anteriores (M 190 100 z).

Arcos elípticos

El comando A dibuja un arco de una elipse que va desde el punto inicial, marcado por la posición del puntero hasta un punto final indicado.

Este comando tiene siete parámetros.

• 1º Indica la longitud del radio en el eje horizontal (x) de la elipse.
• 2º Indica la longitud del radio del eje vertical (y) de la elipse
• 3º Hace una rotación de la elipse respecto la posición que tendría originalmente. El número indica el número de grados que rotará en sentido antihoriario.
• 4º y 5 Con los datos aportados hay dos elipses que pueden pasar por los dos puntos que marcamos, por lo que con estos parámetros delimitamos cual es el arco que queremos que se vea. Estos dos parámetros sólo pueden tener los valores 1 ó 0. El cuarto parámetro indica si veremos el arco de mayor tamaño (valor 1) o el de menor tamaño (valor 0) y el quinto indica si e arco se dibuja en sentido horario (valor 1) o en sentido antihorario (valor 0). Con esto se define cuál de los cuatro arcos posibles es el que queremos ver.
• 6º y 7º Son las coordenadas "x" e "y" respectivamente del punto en el que se termina de dibujar el arco.

<svg width="300" height="300" >
<path d="M 150 75 a 80 100 45 1 1 0 150 m 0 -150 z"  
      stroke="blue" stroke-width=2 fill="white"/>
<path d="M 150 75 a 80 100 45 0 1 0 150 m 0 -150 z"  
      stroke="red" stroke-width=2 fill="white"/>
<path d="M 150 75 a 80 100 45 1 0 0 150 m 0 -150 z"  
      stroke="green" stroke-width=2 fill="white"/>
<path d="M 150 75 a 80 100 45 0 0 0 150 m 0 -150 z"  
      stroke="yellow" stroke-width=2 fill="white"/>		
</svg>

El código de aquí arriba corresponde con la figura que vemos a la derecha.

En este ejemplo hemos dibujado los cuatro arcos elípticos que puede haber entre dos puntos, cada uno de ellos de un color, completando así las dos elipses.

Cada arco lo hemos puesto en una ruta. Las rutas son muy similares, lo único que las diferencia son los parámetros 4º y 5º de cada una y el color de línea.

Los demás parámetros son iguales en las cuatro rutas. El primero y el segundo (80 100) indican los radios de los ejes horizontal y vertical de las elipses.

El tercer parámetro (45) también es igual en todas las rutas e indica que la elipse se inclina 45 grados respecto a su posición original.

Los dos últimos parámetros (6º y 7º) son también iguales en todas las rutas e indican el punto final de los arcos dibujados.

Los parámetros 4º y 5º son los que varían de una ruta a otra. Sólo pueden tomar los valores 0 ó 1, y dependiendo de los valores que tomen se verá un arco u otro.

Incluir diferentes figuras.

En una misma ruta se pueden incluir diferentes trazados de los vistos anteriormente, sólo tenemos que ponerlos uno a continuación de otro.

<svg width=300 height=200>
<path d="M 10 10 l 50 50 c -70 0 -60 20 50 50 q 100 -100 0 70 h 120 m 0 -20 c 50 0 70 -70 0 -100 m 0 0 z"
     stroke="blue" stroke-width=2 fill="white"/> 
</svg>

En este ejemplo hemos puesto varios trazados en una ruta. En primer lugar posicionamos el puntero en el punto inicio (M 10 10).

Dibujamos después con una línea recta (l 50 50).

Seguimos con un curva de Bézier (c -70 0 -60 20 50 50).

Ponemos a continuación una curva cuadrática (q 100 -100 0 70).

Seguimos con una línea horizontal (h 120).

Después movemos el puntero a mano alzada (m 0 -20).

Como último dibujo hacemos otra curva de Bézier (c 50 0 70 -70 0 -100).

Como último paso posicionamos el puntero en el último punto y cerramos la ruta (m 0 0 z).

En la siguiente página veremos cómo incluir texto con SVG

texto en SVG

Página creada por ANYELGUTI.

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

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

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