Ayuda ejercicios unidad 16: Introducción a SVG. Gráficos redimensionables

En este ejercicio practicaremos con los gráficos SVG. Para realizar este ejercicio utilizaremos el archivo svg_propuesto_ini.html que puedes descargarte de la carpeta ejercicios/unidad-16/svg_propuesto_ini.html y guardarlo en la carpeta de ejercicios/unidad16 (o copiar el código que se muestra a continuación). .

Ejercicio 1: Gráficos SVG.

Partimos del archivo svg_propuesto_ini.html que contiene este código:

<!doctype html>
    <html lang="es">
<head>
<title>16. Ejercicio propuesto SVG </title>
<link href='https://fonts.googleapis.com/css?family=Chakra+Petch' rel='stylesheet' type='text/css'>
</head>
<body>
<svg x="0" y="0" width="500" height="400" >
<rect x="0" y="0" width="500" height="400"  fill="grey" />
</svg>
</body>
</html>

Se trata de crear el siguiente gráfico SVG que también está disponible en este enlace: svg_propuesto_fin.htm

Puedes comenzar el ejercicio a partir del archivo svg_propuesto_ini.html que crea un lienzo SVG de 500 x 400, dibuja un rectángulo con esas medidas y le da color gris para que te sirva de referencia, una vez acabado el ejercicio puedes borrar este rectángulo. Este archivo también tiene el enlace para usar la fuente 'Chakra Petch'.

El código con la solución del ejercicio es el siguiente:

<html>
  <head>
    <title>16. Ejercicio propuesto SVG </title>
    <link href='https://fonts.googleapis.com/css?family=Chakra+Petch' rel='stylesheet' type='text/css'>
  </head>
  <body>
  <svg x="0" y="0" width="500" height="400" >
    <desc>Casa con nube y lluvia </desc>
    <defs>
    <linearGradient id="cielo"  x1="0" y1="100%" x2="0" y2="0">
      <stop offset="5%"  stop-color="white"/>
      <stop offset="95%" stop-color="#8abef5"/>
    </linearGradient>
    <linearGradient id="tierra"  x1="0" y1="100%" x2="0" y2="0">
      <stop offset="5%"  stop-color="white"/>
      <stop offset="95%" stop-color="#6c604a"/>
    </linearGradient>
    <radialGradient id="color_nube"  >
      <stop offset="5%"  stop-color="#4b83be"/>
      <stop offset="95%" stop-color="#082a4e"/>
    </radialGradient>
    </defs>
    <symbol id="nube">
      <path   d="M210,225 a20,15 0 0,1 0,-45
        a30,12 0 0,1 75,0
        a20,15 0 0,1 0,45
        a30,12 0 0,1 -75,0 "
        fill="url(#color_nube)"    />
    </symbol>
   <symbol id="casa">
      <path d="M130,250 L240,160 350,250 330,250 330,350 150,350 150,250Z" fill="#429846" stroke="black" stroke-width="4"/>
      <rect x="225" y="290" width="40" height="60"  fill="orange" stroke="black" stroke-width="4" /> 
    </symbol>
    <symbol id="gota">
      <line x1="300" y1="150" x2="290" y2="170" stroke="blue" stroke-width="4"/> 
    </symbol>
    <symbol id="lluvia">
      <use x="0" y="0" xlink:href="#gota" />
      <use x="25" y="10" xlink:href="#gota" />
      <use x="50" y="0" xlink:href="#gota" />
      <use x="-3" y="40" xlink:href="#gota" />
      <use x="25" y="55" xlink:href="#gota" />
      <use x="55" y="40" xlink:href="#gota" />
    </symbol> 
    <rect x="0" y="0" width="500" height="300" fill="url(#cielo)" />
    <rect x="0" y="300" width="500" height="100"  fill="url(#tierra)" />
    <use x="80" y="-90" xlink:href="#nube" />
    <use  xlink:href="#casa" />
    <use  xlink:href="#lluvia" />
    <text x="130" y="40" fill="red" font-size="30" font-family="'Chakra Petch',verdana,arial" stroke="red" stroke-width="2" >
     Ejercicio <tspan font-family="times" fill="black" stroke="black" >aula</tspan>Clic</text>
   </svg>
  </body>
  </html>

Como se ve, hemos creado el símbolo llamado casa compuesto por un trazado con lineto para el contorno de la casa y un rectángulo para la puerta. El símbolo nube es un trazado con arcos elípticos y un degradado radial para el relleno. Un símbolo para la gota de agua compuesto por una sola línea, para la lluvia hemos creado un símbolo compuesto por seis gotas. Un rectángulo con degradado lineal para el cielo y otro para la tierra. Para el texto usamos la fuente 'Chakra Petch' para lo cual necesitamos el enlace en la cabecera y la fuente 'times' que es del sistema y no necesita enlace, para la palabra "aula".
Definir símbolos ayuda a que el código sea más claro, y permite reutilizar partes del dibujo más fácilmente. Por ejemplo, para añadir otra nube y más lluvia bastaría con agregar el código: <use x="180" y="-65" xlink:href="#nube" /> <use x="80" y="20" xlink:href="#lluvia" />
Para hacer que el dibujo se redimensione automáticamente podemos cambiar las dimensiones del viewport a relativas: <svg width="90%" height="auto" viewBox="0 0 500 400">
Esta solución la puedes ver aquí: svg_propuesto_fin.htm, también 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.2)

Cursos Informática Gratuitos

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