Formas geométricas

facebook-svg gplus-svg twitter-svg

El SVG nos permite dibujar varias formas geométricas primitivas.

Elemento ejemplo Descripción
<circle> <circle cx ="50" cy ="75" r ="40" stroke ="black" stroke-width ="4" fill ="#6ab150" /> Dibuja un círculo
<ellipse> <ellipse cx ="100" cy ="75" rx ="50" ry ="50" fill ="#6ab150" stroke ="red" stroke-width ="5" /> Dibuja una elipse
<rect> <rect x ="10" y ="10" height ="100" width ="100" style ="stroke:#000; fill: #6ab150"/> Dibuja un rectángulo
<rect> <rect x ="10" y ="120" height ="100" width ="100" rx ="10" ry ="10" style ="stroke:#000; fill: #6ab150"/> Dibuja un rectángulo con esquinas redondeadas
<polygon> <polygon points ="220,10 300,210 220,250 140,210" style ="fill:#6ab150; stroke:#003300; stroke-width:3" /> Dibuja un polígono
<polyline> <polyline points ="220,10 300,210 220,250 140,210" style ="fill:#6ab150; stroke:#003300; stroke-width:3" /> Dibuja una polilínea

Círculo

En SVG el elemento <circle> es utilizado para dibujar círculos. Los atributos cx y cy definen las coordenadas del centro y el atributo r define el radio del círculo. Si cx y cy no están especificados, el centro del círculo está en el origen del canvas, el punto cuyas coordenadas son: x=0, y=0 ( la esquina izquierda arriba del lienzo SVG ).



   

Elipse

En SVG para dibujar una elipse utilizamos el elemento <elipse>. Los atributos cx y cy definen las coordenadas del centro mientras que los atributos rx y ry definen los radios horizontal ( rx ) y vertical ( ry ) respectivamente.
Si rx = ry el resultado es un círculo. En el siguiente ejemplo rx > ry,  lo que hace que la elipse sea más ancha que alta. Huelga decir que si rx == ry el resultado es un círculo.



   

Rectángulo

Para dibujar un rectángulo podemos utilizar el elemento <rect>. Los atributos x e y definen las coordenadas de la esquina arriba izquierda del rectángulo, mientras que los atributos height y width definen la anchura y la altura del mismo.



   

Rectángulos con esquinas redondeadas

Podemos crear rectángulos con esquinas redondeadas declarando otros dos atributos: rx y ry, donde, exactamente como en el caso de las elipses, rx representa el radio horizontal, y ry el radio vertical.
Si no declaramos ry se considera que ry = rx.



   

Polígono

En SVG podemos dibujar también polígonos. El  elemento <polygon> dibuja líneas entre los puntos definidos por el atributo points. En el siguiente ejemplo empezamos a dibujar en el punto x = 125, y = 10.

<polygon points ="125,10 175,130 75,130"...

el segundo punto tiene las coordenadas x = 175, y = 130.

<polygon points ="125,10 175,130 75,130"...

Observe por favor que la coma aparece solo entre el x y el y. Los puntos están separados entre sí por un espacio.



   

Polilínea

Parece que la única diferencia entre <polygon> y <polyline> es que el <polygon> cierra el trazado, mientras que <polyline> no.