El formato gráfico SVG (VII)
por Luciano Moreno, del departamento de diseño web de BJS Software.

Formas básicas SVG (III).-

Elipse.

Es posible también definir elipses en nuestros gráficos SVG, disponiendo para ello de la etiqueta <ellipse>, cuya sintaxis general es del tipo:

<ellipse cx="cx" cy="cy" rx="rx" ry="ry" style="fill:rgb(r,g,b);stroke:rgb(r,g,b);stroke-width:w"/>

Donde:

• cx, cy, coordenadas centro del círculo.
  
  
• rx, ry, radios de la elipse, en pixels, donde rx corresponde al radio horizontal, y ry al radio vertical. En caso de ser iguales los radios, el resultado final será un círculo.
  
  
• fill:rgb(r,g,b), color del relleno de la elipse, en el sistema RGB.
  
  
• stroke:rgb(r,g,b), color del borde de la elipse en el sistema RGB.
  
  
• stroke-width:w, ancho del borde de laelipse, en pixels.
  

Ejemplo:

<svg width="200" height="200">
  <ellipse cx="99" cy="100.5" rx="77" ry="35.5" style="fill:rgb(0,192,192);stroke:rgb(32,32,32);stroke-width:2"/>
</svg>

Cuyo resultado tenéis en esta ventana.

Y si queremos aplicar opacidad a la misma, basta con definirla en el bloque de estilos:

<svg width="200" height="200">
  <ellipse cx="99" cy="100.5" rx="77" ry="35.5" style="fill:rgb(0,192,192);opacity:0.3"/>
</svg>

El gráfico resultante lo tenéis en esta ventana.

Polígono.-

Para definir un polígono en un gráfico SVG se utiliza la etiqueta <polygon>, de sintaxis genérica:

<polygon points="x1,y1 x2,y2 ... xn,yn" style="fill:rgb(r,g,b);stroke:rgb(r,g,b);stroke-width:w"/>

Donde:

• points=”x1, y1 x2,y2 ...xn,yn” , sucesivos vértices del polígono. Debe haber por lo menos 3 (triángulo).
  
  
• fill:rgb(r,g,b), color del relleno del polígono, en el sistema RGB.
  
  
• stroke:rgb(r,g,b), color del borde del polígono en el sistema RGB.
  
  
• stroke-width:w, ancho del borde del polígono, en pixels.
  

Ejemplo:

<svg width="200" height="200">
 <polygon points="29.5,102 82.5,145154.5,53" style="fill:rgb(0,0,255);stroke:rgb(0,0,0);stroke-width:1"/>
</svg>

Que nos da este polígono.

Y con opacidad:

<svg width="200" height="200">
 <polygon points="29.5,102 82.5,145154.5,53" style="fill:rgb(0,0,255);stroke:none;opacity:0.2"/>
</svg>

El triángulo resultante lo tenéis en esta ventana.

Mediante polígonos podemos crear un sin fin de figuras, como esta estrella de 6 puntas, formada por 2 triángulos:

<svg width="200" height="200">
 <polygon points="52.5,61 136.5,61 97.5,154" style="fill:rgb(255,255,0);stroke:rgb(0,128,0);stroke-width:1"/>
</svg>

Su resultado está en esta ventana.

De todas formas, WebDraw, por ejemplo, nos ofrece la posibilidad  de crear polígonos regulares y figuras estrelladas de diferentes formas y vértices mediante el atributo transform="matriz(...)”, que veremos más adelante, pero cuyos resultados podéis apreciar  en esta ventana