SVG (ANIMACIONES), HTML5 :GRAFICOS

PRACTICA 016: GRAFICOS: SVG ANIMACIONES

Ing. Honoria Reyes Macedo 

IDE: Dreamweaver, Atom o Block de notas
Lenguaje de paginas ESTATICAS: HTML(HyperText Markup Language)

Lenguaje de Estilos CSS3(Cascade Style Sheets) Para darle un aspecto visual.

  

ACTIVIDADES

 

1.- Agregar un logo

1.1.- Buscar una imagen en svg, cambiar su  tamaño a 50 por 50 y guardar en la carpeta img

1.2.- Agregar la imagen y un letrero al archivo libros_HRM.html (líneas sombreadas)

Nota:

-Mi imagen se llama libros001.svg, sustituir por el nombre de tu imagen.

-El valor href debe tener el nombre de tu archivo html

-Y el texto Libros HRM también cambiarlo

2.- Agregar estilos al logo

            2.1 Agregar estilo al letrero del logo (líneas sombreadas)

            2.2 Agregar estilo a la imagen del logo (líneas sombreadas)

Al ejecutar el archivo html desde el explorador quedaría asi:

3.- Crear un pacman con SVG

            3.1 Crear un nuevo article dentro de la section posición_2_1 (líneas sombreadas)

 

3.2.- Crear un pacman con 2 arcos y un circulo. El código ira entre las etiquetas SVG

Tomar como referencia la creación de arcos de la practica 013:

<circle cx="120" cy="80" r="4"  fill="red"></circle>

<path d="M 60,320 A 15,20 0 1,0 120,260" fill="none" stroke="RoyalBlue" stroke-width="3" />

 

        Pasos para crear los arcos con path:

4.- Al Ejecutar el archivo html, queda asi:

5.- Girar la imagen

Agrupar los trazos  y el circulo creado en una etiqueta   <g transform="rotate(50 200,100)"> 

 y transformar (la franja azul son 2 arcos y un circulo  que creaste)

Quedaría asi: Por ejemplo en las líneas azules: 

                      <g transform="rotate(50 50,50)">

      <path d="M 50,0 A 50,50 0 1,0 50,100  z" fill="gray" stroke="gray" stroke-width="3" />

      <path d="M 0,50 A 50,50 0 1,0 100,50 z" fill="gray" stroke="gray" stroke-width="3" />

      <circle cx="30" cy="20" r="8"  fill="red"></circle>

6.- Agregar eventos

6.1.- Crear el archivo mi_scriptLibros.js en la carpeta js

6.2 Declarar las variables a usar en el archivo mi_scriptLibros.js

6.3.- Agregar la función para desplazar (Agregar en las líneas azules los 2 arcos y el circulo)

Por ejemplo en las líneas azules:

result='<g transform="translate('+ x +','+ y +' ), rotate('+ rotar +' 50,50)">';

result+='<path d="M 50,0 A 50,50 0 1,0 50,100  z" fill="gray" stroke="gray" stroke-width="3" />';

result+='<path d="M 0,50 A 50,50 0 1,0 100,50 z" fill="gray" stroke="gray" stroke-width="3" />';

result+='<circle cx="30" cy="20" r="8"  fill="red"></circle>';

7.- Indicar en html el uso del java script , antes de cerrar el body. (línea sombreada)