Creación de formas básicas en SVG

Creación de formas básicas en SVG

Creación de formas básicas en SVG

SVG contiene los siguientes elementos para la creación de formas básicas: RECT, CIRCLE, ELLIPSE, LINE, POLYLINE, POLYGON. Además estaría el elemento PATH con el que se podría crear cualquier forma incluida éstas. Vamos a ver cómo se crean las diferentes formas básicas en SVG y desde JavaScript. Hemos de tener en cuenta, que para crear las formas en JavaScript debemos usar métodos DOM ‘namespace-aware’.

Rectángulo

SVG

JavaScript

Rectángulo redondeado

Los atributos rx y ry son los radios de los ejes de las elipses usados para redondear las esquinas del rectángulo.

SVG

JavaScript

Círculo

Basado  en el centro del círculo que define la posición del mismo, en función de los atributos cx y cy, y del radio del círculo definido por el atributo r.

SVG

JavaScript

Elipse

Es similar al círculo pero con dos rádios, rx y ry.

SVG

JavaScript

Línea

Segmento con un punto inicial y otro final.

SVG

JavaScript

Polilínea

Es un conjunto de líneas rectas conectadas, que generalmente definen formas abiertas:

SVG

JavaScript

Polígono

Es un conjunto de líneas rectas conectadas, que definen una forma cerrada.

SVG

JavaScript

También podemos crear formas con programas como Illustrator o Inkscape. Si estas formas básicas las construimos desde estos programas, veremos que Illustrator usa las formas básicas de SVG mientras que InkScape únicamente usa RECT, mientras que el resto de formas las convierte en PATH.

Tags:
©2022 PoseLab SL. All rights reserved.