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.
import numpy as np
import matplotlib.pyplot as plt
from mpl_toolkits.mplot3d import Axes3D
# Crear el dominio de x
x = np.linspace(0, 1, 100)
y = np.sqrt(x)
# Crear los ángulos para rotar alrededor del eje x
theta = np.linspace(0, 2 * np.pi, 100)
X, Theta = np.meshgrid(x, theta)
# Coordenadas del sólido de revolución
Y = np.sqrt(X) * np.cos(Theta)
Z = np.sqrt(X) * np.sin(Theta)
# Graficar
fig = plt.figure(figsize=(10, 7))
ax = fig.add_subplot(111, projection=’3d’)
ax.plot_surface(X, Y, Z, color=’skyblue’, alpha=0.8, edgecolor=’k’)
ax.set_title(‘Sólido generado al rotar y=√x de 0 a 1 sobre el eje x’, fontsize=12)
ax.set_xlabel(‘x’)
ax.set_ylabel(‘y’)
ax.set_zlabel(‘z’)
ax.view_init(elev=30, azim=45)
plt.tight_layout()
plt.show()