Formas geométricas
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.