Unidad 16. Ejercicio: Gráficos SVG



En este ejercicio practicaremos con los gráficos SVG. Para realizar este ejercicio no es necesario descargar ningún archivo, vamo a crear un archivo nuevo.

Ejercicio 1: Gráficos SVG.

  1. Crea el archivo nuevo grafico_svg.html y copia el código que se muestra a continuación, puedes guardarlo en la carpeta de ejercicios/cursos-aulaclic:
     <!doctype html>
        <html lang="es">
          <head>
          <meta charset="utf-8" />
          <title>16. Ejercicio paso a paso SVG </title>
        </head>
        <body> 
        </body>
    </html>
  2. Para entender el sistema de coordenadas y la creación de formas básicas vamos a realizar un dibujo con varios elementos. En primer lugar, dentro del body, vamos a escribir la etiqueta svg con las dimensiones del área de dibujo o lienzo (viewport) y el tamaño del área de visualización (viewBox), además, para ver el viewport creamos un rectángulo de las mismas dimensiones con fondo azul claro:
  3. <svg x="0" y="0" width="50%" height="auto" viewBox="0 0 300 120" >
    <rect x="0" y="0" width="300" height="2000" fill="#C1DBF7" />
    </svg>

    Veremos esto:


  4. En segundo lugar vamos a dibujar un círculo con el centro en (60,60) y un radio de 50 px., el contorno será de color negro con un grosor de 4 px., y un color de relleno verde:
     <circle cx="60" cy="60" r="50" stroke="black" stroke-width="4" fill="green" />

    Recuerda que el origen de coordenadas (0,0) está en la esquina superior izquierda del viewport, como muestra esta imagen:



  5. Seguidamente dibujamos un trazado con forma de trapecio y fondo rojo:
     <path d="M100,50 L200,50 180,100  120,100Z" fill="red" stroke="black" stroke-width="4"/>

    Con el comando M100,50 colocamos el punto inicial (100,50) pero no dibujamos nada, el siguiente comando L200,50; dibuja una línea desde el punto actual (100,50) al punto (200,50); el siguiente comando 180,100; (la letra L se puede omitir) dibuja una línea desde el punto actual (200,50) al punto (180,100); el siguiente comando 120,100; dibuja una línea desde el punto actual (180,100) al punto (120,100); el comando Z, cierra el trazado, es decir, dibuja una línea entre el punto inicial (100,50) y el último punto (120,100).


  6. A continuación situamos el trapecio detrás del círculo y creamos un degradado radial para el círculo:
    <svg x="0" y="0" width="50%" height="auto" viewBox="0 0 300 120" >
    <rect x="0" y="0" width="300" height="2000"  fill="#C1DBF7"  />
    <path d="M100,50 L200,50 180,100  120,100Z" fill="red" stroke="black" stroke-width="4"/>
    <circle cx="60" cy="60" r="50" stroke="black" stroke-width="1" fill="url(#circular)" />
    <defs>
    <radialGradient id="circular"  >
    <stop offset="2%"  stop-color="#89f08d"/>
    <stop offset="95%" stop-color="#0a4014"/>
    </radialGradient>
    </defs>
    </svg>

    Dentro de la etiqueta defs definimos el degradado radial, y le damos el identificador "circular", para asignar el gradiente al círculo, asignamos al relleno ese identificador: fill="url(#circular)"

    Para especificar el degrado utilizamos dos etiquetas stop, donde indicamos un color con stop-color, y donde empieza y acaba el degradado con offset. En nuestro caso, el color verde claro (#89f08d) va desde el centro del círculo hasta el 2% del radio, ahí comienza el degradado que llega hasta el 95% del radio, a partir de ahí hasta el final el color es el verde oscuro (#0a4014).


  7. Para finalizar insertamos un texto que sigue un trazado. El trazado se define como cualquier otro trazado, en este caso, hemos utilizado en arco:
    <path id="aulaclic" d="M180,90 a55,65 0 0,1 290,195" /> 
    Para crear el texto utilizamos la etiqueta text indicando el color, el tamaño, y la fuente; a continuación asignamos el trazado al texto con textPath:
     <text  fill="blue" font-size="30" font-family="verdana">
       <textPath xlink:href="#aulaclic">aulaClic  </textPath>
    </text>

    aulaClic

  8. El código final es este:
    <!doctype html>
    <html lang="es">
      <head>
        <meta charset="utf-8" />        
       <title>16. Ejercicio paso a paso SVG </title>      
      </head>      
    <body> 
     <svg x="0" y="0" width="50%" height="auto" viewBox="0 0 300 120" >
       <rect x="0" y="0" width="300" height="2000"  fill="#C1DBF7"  />
       <circle cx="60" cy="60" r="50" stroke="black" stroke-width="4" fill="url(#circular)" />
       <path d="M100,50 L200,50 180,100  120,100Z" fill="red" stroke="black" stroke-width="4"/>
      <defs>
        <radialGradient id="circular"  >
          <stop offset="2%"  stop-color="#89f08d"/>
          <stop offset="95%" stop-color="#0a4014"/>
        </radialGradient>
        <path id="aulaclic" d="M210,110 a55,65 0 0,1 290,195" />
      </defs>
      <text fill="blue" font-size="30" font-family="verdana">
        <textPath xlink:href="#aulaclic">aulaClic  </textPath>
      </text>
    </svg>
    </body>  
    </html>

  9. Si no dispones de un editor de texto (por ejemplo, si estás viendo este curso desde un dispositivo móvil) puedes probar el código anterior seleccionándolo y pegándolo como se explica en esta página: Probar código desde el navegador.

Enero-2019 (V 2.0)
Volver






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.