3.284 cursos gratis
6.263.460 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) |4398 alumnos|Fecha publicación: 15/09/2004

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.


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


Cursos Valoración Alumnos Vídeo
Hacer una web con Joomla
Hacer una web con Joomla. Joomla es un gestor de contenido, en el que puedes crear tu sitio Web de un modo sencillo y rápido. Este curso es... [06/08/09]
5/5 2.192  
Autocad. Dibujo en 2d y 3d (1/4)
Autocad. Este curso está diseñado, para que cualquier persona sin ningún conocimiento de Autocad pueda seguirlo y pueda divertirse dibujando[09/06/09]
 4,82/5 3.732  
Conoce ADSL
Las conexiones ADSL que muchos conocemos y que muchos tenemos en nuestros puestos de trabajo y domicilios hacen que la navegación sea agradable y con ventajas que hasta e... [05/11/04]
 4,39/5 6.218  


Publicar en   del.icio.us    digg    meneame

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