2.9 KiB
| title | localeTitle |
|---|---|
| SVG Shapes | SVG Shapes |
SVG Shapes
Se pueden crear varias formas usando el dibujo SVG. Un dibujo SVG puede usar y combinar siete formas: Trazado, Rectángulo, Círculo, Elipse, Línea, Polilínea y Polígono.
Camino
El elemento de path es el que se ve con más frecuencia y generalmente lo generan los programas diseñados para exportar el código SVG.
<path d="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z" />
La path ejemplo anterior generará un símbolo "más" (+) cuando se use dentro de un dibujo SVG. Los elementos de path SVG no se crean manualmente, sino que se generan a través de programas de diseño que pueden manipular gráficos vectoriales, como Illustrator o Inkscape.
Rectángulo
El elemento de rectángulo rect dibuja un rectángulo en la pantalla y acepta seis atributos.
<rect x="0" y="0" width="100" height="50" rx="10" ry="10" />
x e y asignan la posición de la esquina superior izquierda del rectángulo, y el width y la height asignan el tamaño del rectángulo. rx y ry asignan el radio de las esquinas del rectángulo, similar a la propiedad de borde-radio CSS.
Circulo
El elemento circle acepta tres atributos.
<circle cx="100" cy="100" r="50" />
cx y cy asignan la posición del centro del círculo, y r asigna el radio (tamaño) del círculo.
Elipse
El elemento elipse, ellipse , es similar al elemento circle , excepto que el radio se divide en dos atributos.
<ellipse cx="100" cy="100" rx="50" ry="20" />
Nuevamente, cx y cy asignan la posición del centro de la elipse, y ahora rx y ry asignan el radio horizontal y vertical de la elipse, respectivamente. Una rx más grande dará una elipse "gruesa", y una ry más grande dará una elipse más delgada. Si rx y ry son iguales, formará un círculo.
Línea
El elemento de line es simple, y acepta cuatro atributos.
<line x1="0" x2="100" y1="50" y2="70" />
Los atributos x1 e y1 asignan el primer punto de la línea, y los atributos x2 e y2 asignan el segundo punto de la línea.
Polilínea
Una polyline es una serie de líneas rectas conectadas, asignadas en un solo atributo.
<polyline points="0 100, 50 70, 60 40, 20 0" />
El atributo de points asigna una lista de puntos, cada punto separado por una coma.
Polígono
El elemento de polygon también es una serie de líneas rectas conectadas, pero en este caso, la última línea volverá a conectarse automáticamente al punto inicial.
<polygon points="0 100, 50 70, 60 40, 20 0" />
Este ejemplo dibujará la misma forma que la polyline anterior, pero dibujará una línea adicional para "cerrar" la serie de líneas.