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.