Unidad 16. Introducción a SVG. Gráficos redimensionables (VI)

16.3. Dibujar formas básicas en SVG

Las figuras geométricas tienen un contorno de un color y grosor determinados, y también un relleno de un cierto color. La propiedad stroke="color" indica el color del contorno. La propiedad stroke-width="n" indica el grosor del contorno, si no se indica toma valor 1. La propiedad fill="color" indica el color del fondo, el valor "none" significa que no hay relleno o dicho de otra forma, que el relleno es transparente. Para que la explicación resulte más clara vamos a omitir escribir estas propiedades en los ejemplos que siguen a continuación (la mayoría tendrán un contorno negro y un relleno gris)

Círculo. circle cx cy r Dibuja un círculo.

Parámetros: cx cy coordenadas del punto central del círculo, r radio.

Ejemplo:

<circle cx="60" cy="60" r="50"  />

Línea. line x1 y1 x2 y2 Dibuja una línea recta entre dos puntos.

Parámetros: x1 y1 coordenadas del punto inicial, x2 y2 las coordenadas del punto final de la línea.

Ejemplo:

<line x1="10" y1="10" x2="100" y2="30"  />

Rectángulo. rect x y width height rx ry Dibuja un rectángulo, opcionalmente, con las esquinas redondeadas.

Parámetros: x y coordenadas de la esquina superior izquierda, width, height anchura y altura, rx, radio horizontal de las esquinas redondeadas, ry, radio vertical de las esquinas redondeadas, ambos radios son opcionales, si sólo se especifica el primero, el segundo toma el mismo valor que el primero.

Ejemplos:

<rect x="20" y="10" width="80" height="60" />
<rect x="120" y="10" width="80" height="60" rx="10"/>
<rect x="220" y="10" width="80" height="60" rx="10" ry="20"/>