Podemos también dibujar el rectángulo con las esquinas redondeadas, para ello sólo tenemos
que añadir los atributos rx y ry cuyo valor será el radio horizontal y vertical de la esquina.
El ejemplo que vemos a la derecha tiene el siguiente código:
<svg width=200 height=200>
Para dibujar un cuadrado no tenemos más que dibujar un rectángulo en el que la anchura y la
altura sean iguales.
Dibujar una elipse
Para dibujar una elipse utilizaremos el siguiente código:
<svg height="200" width="200">
<ellipse cx=100 cy=100 rx=95 ry=60
stroke="red" stroke-width=2 fill="yellow" />
</svg>
Como en las figuras anteriores utilizamos los atributos stroke ,
stroke-width y fill para indicar el color del borde,
el grosor del borde, y el color de relleno.
El resto de elementos de esta etiqueta son:
ellipse : el nombre de la etiqueta indica que lo que dibujamos es una elipse.cx=n cy=n : coordenadas del centro de la elipse. cx es la coordenada horizontal y
cy es la coordenada vertical.rx=n : radio de la elipse en el plano horizontal.
ry=n : radio de la elipse en el plano vertical.
Polígonos
Para dibujar un polígono cualquiera utilizaremos un código como el siguiente:
<svg height="200" width="200">
<polygon points="100,10 190,190 10,190"
stroke="purple" stroke-width=2 fill="aqua"/>
</svg>
Como en las figuras anteriores indicamos el borde y el relleno con
los atributos stroke , stroke-width y fill .
El nombre de la etiqueta polygon indica que lo que estamos
dibujando es un polígono.
El atributo points indica los puntos de las esquinas del polígono.
Escribimos aquí una serie de números por parejas. Los dos números de la pareja van separados
por una coma, y cada pareja se separa de las demás por espacios en blanco. La primera pareja de números
indica las coordenadas x e y respectivamente del primer punto. La segunda pareja
indica las coordenadas x e y del segundo punto, y así sucesivamente, con cada pareja de números
más que pongamos indicamos las coordenadas del siguiente punto. Al llegar al
último punto el polígono busca el primer punto para cerrarse automáticamente.
Al ir poniendo los puntos se va trazando la línea que delimita el polígono, por
lo que es importante el orden en el que éstos se ponen para trazar la línea correctamente.
Por otra parte debemos poner un mínimo de tres puntos para que el polígono tenga una
superficie.
Líneas rectas
Para dibujar una línea recta lo haremos con un código como el siguiente:
<svg height=200 width=200>
<line x1=5 y1=5 x2=190 y2=190 stroke="red" stroke-width=2/>
</svg>
Los atributos stroke y stroke-width indican el color y
grosor de la línea respectivamente.
El nombre de la etiqueta line indica que lo que dibujamos
es una línea.
los atributos x1 y y1 indican respectivamente las
coordenadas horizontal y vertical del principio de la línea.
los atributos x2 y y2 indican respectivamente las
coordenadas horizontal y vertical del final de la línea.
La línea se traza desde el punto indicado como principio al punto
indicado como final.
Estilo de líneas
Podemos poner un remate al final de la línea con el atributo
stroke-linecap , el cual puede tener los siguientes valores:
stroke-linecap="butt" : valor por defecto, la línea se queda como está.stroke-linecap="round" : añade un semicírculo al final de la línea, poniendo un
remate redondeado.stroke-linecap="square" : añade medio cuadrado al final de la línea, da un remate
cuadrado.
Para poder apreciar las diferencias las líneas deben ser bastante gruesas como
para que se vea el remate.
El atributo stroke-dasharray permite hacer líneas discontinuas. Como valor se ponen
una o varias parejas de números. En cada par de números el primero es la longitud de línea que se ve
y el segundo la longitud que está oculta. El patron se repite a lo largo de toda la línea.
Por ejemplo la ultima línea del ejemplo de la derecha tiene el siguiente
atributo stroke-dasharray="12,4 2,4 2,4" .
El contenedor SVG de la derecha muestra una serie de líneas con estos atributos.
su código es el siguiente:
<svg width=200 height=200>
<line x1=20 y1=20 x2=180 y2=20 stroke="navy" stroke-width=10 stroke-linecap="butt"/>
<line x1=20 y1=50 x2=180 y2=50 stroke="navy" stroke-width=10 stroke-linecap="round"/>
<line x1=20 y1=80 x2=180 y2=80 stroke="navy" stroke-width=10 stroke-linecap="square"/>
<line x1=20 y1=110 x2=180 y2=110 stroke= navy stroke-with=2 stroke-dasharray="2,2"/>
<line x1=20 y1=140 x2=180 y2=140 stroke= navy stroke-with=2 stroke-dasharray="6,6"/>
<line x1=20 y1=170 x2=180 y2=170 stroke= navy stroke-with=2 stroke-dasharray="12,4 2,4 2,4"/>
</svg>
Polilíneas
Una polilínea es una sucesión de líneas rectas en la que cada una empieza donde
acaba la anterior. También se le llama línea quebrada. Para dibujar una polilínea
pondremos un código como el siguiente:
<svg height=200 width=200>
<polyline points="10,50 50,50 50,90 90,90 90,130 130,130 130,170"
stroke="red" stroke-width=4 fill="yellow" />
</svg>
El nombre de la etiqueta polyline indica que se traza una polilínea.
Los atributos stroke y stroke-width nos dan el color y el grosor de
la línea.
El atributo fill crea un relleno en la figura. Para ello traza una línea recta
del primer punto al último y rellena con el color indicado las zonas que quedan dentro.
El atributo points funciona como en el polígono, es decir, cada pareja de números
indica las coordenadas de un punto. Al contrario que en el polígono, aquí el último punto
no se cierra con el primero.
En la siguiente página seguiremos incluyendo figuras con SVG
Dibujar rutas
RSS. Suscribir canal. 
