HTML5: Crea figuras geométricas con SVG

La etiqueta nos permite crear figuras rectangulares y cuadradas. Luego podemos modificar sus características visuales mediante atributos de HTML y/o CSS.
Viernes, 6 de Enero de 2017

Como vimos en nuestro primer ejemplo de creación de imágenes, donde creamos un círculo, existen una serie de figuras geométricas predeterminadas que podemos crear dentro del elemento <svg>. Estas figuras son:

* <rect>: permite crear cuadrados y rectángulos.

* <circle>: permite crear círculos.

* <ellipse>: permite crear elipses.

* <line>: permite crear líneas.

* <polyline>: permite crear múltiples líneas.

* <polygon>: permite crear polígonos.

* <path>: permite crear trazados.

A continuación veremos en detalle cómo trabajar con algunas de estas figuras predeterminadas.

Creando rectángulos

Veamos un ejemplo de código utilizando la etiqueta <rec>:

<svg width=»400″ height=»110″>

<rect width=»500″ height=»200″ style=»fill:rgb(0,0,255);stroke-width:5;stroke:rgb(0,0,0)» />

</svg>

Como podemos ver, la etiqueta <rec> nos permite crear figuras geométricas cuadradas o rectangulares. Mediante los atributos de HTML width y height vamos a definir el ancho y el alto en píxeles. El resto de las propiedades visuales las podemos definir mediante atributos de HTML, o bien como hicimos en este caso con atributos de CSS. El atributo style, aquí utilizado, nos permite asignar propiedades y valores de CSS, los cuales poseen mucha mayor diversidad a los atributos de HTML.

Veamos ahora otro ejemplo con más atributos

<svg width=»400″ height=»180″>

<rect x=»50″ y=»20″ width=»150″ height=»150″

style=»fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9″ />

</svg>

En este caso se agrega, mediante CSS, la posibilidad de aplicar opacidad a la imagen a través de la propiedad opacity. Este es un efecto más que interesante porque nos permite lograr niveles de profundidad y composiciones más complejas para nuestra interfaz.

Creando elipses

Si lo que necesitamos es crear una figura elíptica, HTML5 nos brinda la etiqueta <ellipse>. Esta etiqueta funciona de forma casi idéntica a la etiqueta <rec>. Veamos un ejemplo de código para conocer sus propiedades:

<svg height=»140″ width=»500″>

<ellipse cx=»200″ cy=»80″ rx=»100″ ry=»50″

style=»fill:yellow;stroke:purple;stroke-width:2″ />

</svg>

Mediante los atributos cx y cy vamos a definir las coordenadas de la figura respecto de su centro, mientras que con el atributo rx definimos el radio horizontal y con el atributo ry el radio vertical, a diferencia de la etiqueta <circle> que posee un único radio.

Últimos lanzamientos Ver más

 Do NOT follow this link or you will be banned from the site!