3.201 cursos gratis
6.235.079 alumnos
Publica tu curso gratis
Busca cursos gratis:
Estás aquí: mailxmail > Cursos de Informática > Internet > SVG: gráficos e interactividad en la Web > SVG: Elementos disponibles (I)

SVG: gráficos e interactividad en la Web

Autor: Ricardo Borillo
Curso:  4,43/5 4,43/5 (35 opiniones) |4381 alumnos|Fecha publicación: 15/09/2004
Capítulos del curso

Capítulo 6:

 SVG: Elementos disponibles (I)

El elemento SVG es la raiz de todo documento y pude contener el siguiente conjunto de atributos básicos:

-Definiciones de espacios de nombres (xmlns="http://www.w3.org/2000/svg").
-Versión de SVG a la que se refiere el documento (version="1.1").
-Coordenada x a partir de la cual se definirá el documento (x).
-Coordenada y a partir de la cual se definirá el documento (Y).
-Ancho de la representación gráfica (width).
-Alto de la representación gráfica (height).

<svg xmlns="http://www.w3.org/2000/svg " version="1.1" x="10" y="10" width="500px" height="400px">
  ...
</svg>

El elemento G.- El elemento "G" se utiliza como contenedor para agrupar distintos objetos y así poder realizar sobre ellos acciones de forma global. Podemos asignarle un ID y así realizar transformaciones, animaciones u otras acciones. Las definiciones de grupos pueden utilizarse de forma aninada.

<svg xmlns="http://www.w3.org/2000/svg " version="1.1" width="500" height="400">
  <g opacity="0.2">
    <rect x="100" y="100" width="100" height="100" fill="red" />
    <rect x="150" y="150" width="100" height="100" fill="blue" />
  </g>
  <rect x="200" y="200"
width="100" height="100" fill="navy" />
</svg>

Figure 12. elemento-g.svg

SVG: Elementos disponibles (I)
Referencias dentro de SVG.- Las referencias dentro de SVG permiten la reutilización de distintas definiciones de objetos en cualquier punto del documento. Así, podemos definir filtros u otras propiedades de ajuste gráfico de forma general dentro del documento y aplicarlas dinámicamente vía scripting.

<linearGradient id="MyGradient">
</linearGradient>

<rect style="fill:url(#MyGradient)"/>
Otro tipo de referencias aceptadas en SVG y que se refieren a recursos externos al documento, son las realizadas mediante XLink:

<svg xmlns:xlink="http://www.w3.org/1999/xlink ">
  <image xlink:href="foo.gif" />
</svg>

Para utlizar enlaces XLink dentro del documento, es necesario especificar previamente la definición del espacio de nombres asociado al mismo:

xmlns:xlink="http://www.w3.org/1999/xlink "

DEFS.- Sección de declaración de los elementos que posteriormente podrán ser referenciados dentro del documento. La forma de referenciar los elementos declarada está descrita en el apartado anterior (Referencias dentro de SVG).

<svg width="8cm" height="3cm" xmlns="http://www.w3.org/2000/svg ">
  <defs>
    <linearGradient id="MyGradient">
    </linearGradient>
  </defs>
  <rect style="fill:url(#MyGradient)"/>
</svg>

 

Capítulo anterior - SVG: geometría (II)
Recibe nuestras novedades
Al presionar "Recibir" estás dándote de alta y aceptas las condiciones legales de mailxmail

Hay 35 opiniones. Opina sobre este curso.

Descarga el PDF gratis

Cursos similares a SVG: gráficos e interactividad en la Web


Cursos Valoración Alumnos Vídeo
Introducción a la fotografía digital
La cámara digital ha irrumpido con fuerza en todos los ámbitos de la fotografía. Ya no se trata únicamente de un instrumento en manos de profesionales o del capricho de a... [18/02/05]
 4,24/5 32.600  
La red
Este es un curso que trata sobre la realización de redes informáticas. Se podrá ver cómo realizar una red, cuál es la definición de red, qué clase de redes hay y cómo ela... [10/01/06]
 2,83/5 3.579  
Adobe Photoshop
Adobe Photoshop (Ps) es una aplicación que se utiliza para la edición, retoque fotográfico y pintura a base de imágenes de mapa de bits. Ph... [18/05/09]
 4,13/5 2.400  


Publicar en   del.icio.us    digg    meneame

¿Qué es mailxmail.com?|ISSN: 1699-4914|Recomiéndanos|Ayuda
Condiciones legales de mailxmail