Gráficos vectoriales

Comentar 3/16/2017 A+ A-

En nuestros documentos HTML5 es posible trabajar con gráficos vectoriales SVG por lo que se puede utilizar las etiquetas correspondientes. En nuestro ejercicio vamos a replicar el gráfico de un círculo, rectángulo, línea y elipse con sus correspondientes propiedades.

El código Html es el que sigue:

<!DOCTYPE html>
<html>
      <head>
       <title>Grafico en SVG</title>
      </head>
      <body>
       
       <svg id="circulo" width="400" height="400" xmlns="http://www.w3.org/2000/svg">
                 <circle id="circuloazul" cx="200" cy="200" r="50" fill="green" />
                 <rect id="rectangulo" width="100" height="100" fill="red" />
                 <line x1="100" y1="100" x2="200" y2="200" style="stroke: blue; stroke-width:8;" />
                 <ellipse cx="200" cy="200" rx="200" ry="10" fill="black" />

            </svg>
      </body>
</html>