SVG, HTML5 :GRAFICOS

 PRACTICA 014:  GRAFICOS:SVG

Ing. Honoria Reyes Macedo 

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

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

INTRODUCCION:

SVG: Scalable Vector Graphics, es un formato gráfico basado en XML para crear archivos vectoriales en 2D, su uso es por medio de etiquetas.

En esta practica se utiliza con html. con hojas de estilo en cascada(archivos .css)

ACTIVIDADES

1.- Agregar una nueva sección article en el archivo libros_HRM.html creado en la práctica anterior (líneas sombreadas)

2.- Agregar en el article creado, puntos en donde el valor de Y no cambia (lineas sombreadas)

3.- Agregar dos arcos a partir de los puntos creados (Líneas sombreadas)

Nota1: Observa que el punto inicial del arco inicia en la posición del comando M.

El punto final de cada arco se incluye al final del comando del arco A

Nota2: Si se cierra el comando A con una Z, se trazará una línea hasta el punto inicial

Ejemplo: d="M 60,140 A 15,20 0 1,0 60,200 z"

4.- Al probar con doble click sobre libros_HRM.html  quedará asi:

5.- Agregar nuevos puntos en donde X no cambia (líneas sombreadas)

6.- Agregar un arco a partir de los puntos creados (línea sombreada)

Nota1: Observa que el punto inicial del arco inicia en la posición del comando M.

El punto final de cada arco se incluye al final del comando del arco A

Nota2: Si se cierra el comando A con una Z, se trazará una línea hasta el punto inicial

Ejemplo: d="M 60,140 A 15,20 0 1,0 60,200 z"

7.- Agregar nuevos puntos en donde X e Y si cambian (líneas sombreadas)

8.- Al probar con doble click sobre libros_HRM.html quedaría asi:

9.- Agregar un estilo y un scrollbar a la sección que contiene los articulos en el archivo mi_estiloLibros.css (líneas sombreadas)

10.- Al probar con doble click sobre libros_HRM.html quedaría asi:

11.- Agregar arcos partir de los puntos creados (línea sombreada)

Nota: Observa que el punto inicial del arco inicia en la posición del comando M.

El punto final de cada arco se incluye al final del comando del arco A

********************************************************************************

ANEXO I: Valores del arco(A) en una trayectoria(path)

Tomando en cuenta los dos puntos rojos:Divide el arco en arco grande y arco chico

********************************************************************

ANEXO II : EJERCICIO DE OBSERVACION: TRANSFORMANDO(translate,rotate, scale, skewX)

Nota: Los ejercicios se agregaran en un nuevo article     </article> 

dentro de la seccion  class="posicion_2_1" 

 

1.- Agregar un triangulo y su translación

    <article class=="posicion_2_1_4">

             <h3>OBSERVACION DE translate,rotate, scale, skewX </h3>

             <svg width="300" height="200"  viewBox="0 0 350 350" >

                  <path fill="red" d="M 10,215 210,215 110, 42 z " stroke="purple" stroke-width="3"/>

                  <path transform="translate(200,80)" fill="red" d="M 10,215 210,215 110, 42 z " stroke="purple" stroke-width="3"/>

              </svg>

 

</article>

2.- Agregar en el article un triangulo y 3 rotaciones del mismo

              <svg  width="300px" height="200px" viewBox="0 0 350 410">

                  <path fill="yellow" d="M 10,215 210,215 110, 42 z " stroke="purple" stroke-width="3"/>

                  <path transform="rotate(25 10,215)" fill="yellow" d="M 10,215 210,215 110, 42 z " stroke="purple" stroke-width="3"/>

                  <path transform="rotate(50 10,215)" fill="yellow" d="M 10,215 210,215 110, 42 z " stroke="purple" stroke-width="3"/>

                  <path transform="rotate(75 10,215)" fill="yellow" d="M 10,215 210,215 110, 42 z " stroke="purple" stroke-width="3"/>

              </svg>

3.- Agregar en el article un triangulo y su translación y rotacion

              <svg  width="300px" height="200px" viewBox="0 0 350 350">

                  <path fill="purple" d="M 10,215 210,215 110, 42 z " stroke="purple" stroke-width="3"/>

                  <path transform="translate(200,50),rotate(25)" fill="purple" d="M 10,215 210,215 110, 42 z " stroke="purple" stroke-width="3"/>

              </svg>

4.- Agregar en el article un triangulo y su modificación en escala horizontal(%) y escala vertical(%)

              <svg  width="300px" height="200px" viewBox="0 0 350 350">

                  <path fill="gray" d="M 10,215 210,215 110, 42 z " stroke="purple" stroke-width="3"/>

                   <path transform="scale(0.4,1.3)" fill="gray" d="M 10,215 210,215 110, 42 z " stroke="purple" stroke-width="3"/>

              </svg>

5.- Agregar en el article un triangulo y su sesgado horizontal

              <svg  width="300px" height="200px" viewBox="0 0 350 350">

                                 <path fill="brown" d="M 10,215 210,215 110, 42 z " stroke="purple" stroke-width="3"/>

                                 <g transform="skewX(30)">  <!--Zesga del eje x -->

                                                  <path fill="brown" d="M 10,215 210,215 110, 42 z " stroke="purple" stroke-width="3"/>

                                  </g>

              </svg> 

Quedaría así:

Nota:

El método matrix es una combinación de traslación, escalado y sesgado. Tiene seis parámetros dentro del paréntesis.

transform="matrix(a,b,c,d,e,f)"

 

----------------------------------------------------0------0--------------------------------

------------------------------------------------000-----000------------------------------