Unidad 16. Introducción a SVG. Gráficos redimensionables (XI)



16.5. Organizar y agrupar gráficos <g>, <use> y <symbol>

El elemento g es un contenedor para agrupar elementos gráficos. Junto con la descripción (desc) y el título proporciona información sobre cada parte del gráfico, de esta forma se facilita la organización de gráficos complejos, así como su accesibilidad.

También es interesante agrupar elementos con g para poder manipularlos como una sola entidad, esto es especialmente útil cuando queremos realizar animaciones sobre el grupo. Otra ventaja de usar grupos es que podemos reutilizar el grupo creando instancias del mismo mediante el elemento use. A estas instancias podemos aplicarles diversas transformaciones, por ejemplo, colocarlas en distinta posición, rotarlas, etc.

Vamos a explicar estos dos elementos mediante este ejemplo que genera el sol que se ve a continuación.

<svg>
<g id="rayo">
<line x1="200" y1="90" x2="200" y2="110" stroke="red" stroke-width="5"/> 
</g> <circle cx="200" cy="150" r="40" stroke="red" stroke-width="4" fill="yellow" />
<use xlink:href="#rayo" transform="rotate(45, 200, 150)"/>
<use xlink:href="#rayo" transform="rotate(90, 200, 150)"/>
<use xlink:href="#rayo" transform="rotate(135, 200, 150)"/>
<use xlink:href="#rayo" transform="rotate(180, 200, 150)"/>
<use xlink:href="#rayo" transform="rotate(225, 200, 150)"/>
<use xlink:href="#rayo" transform="rotate(270, 200, 150)"/>
<use xlink:href="#rayo" transform="rotate(315, 200, 150)"/>
</svg>

Agrupar <g>. El elemento g tiene una etiqueta de inicio <g> y otra de cierre </g>, entre ambas se escriben los elementos gráficos (líneas, paths, ...) que formarán el grupo. Los elementos gráficos se dibujarán normalmente. Si, además, queremos utilizar un grupo en una etiqueta use, debemos asignarle un identificador id="nombre". En nuestro ejemplo, el id="rayo" y el grupo está formado por un elemento line.

A continuación dibujamos un círculo con fondo amarillo que representa un sol, para dibujar los rayos del sol vamos a utilizar el grupo que hemos creado. Mediante el elemento use creamos siete instancias más del grupo y a cada una de ellas le aplicamos una rotación de 45º para distribuir los rayos alrededor del círculo.

Usar <use>. El elemento use tiene el enlace al identificador del grupo mediante xlink:href="identificador", a continuación, opcionalmente, se pueden aplicar las transformaciones y propiedades que deseemos. En nuestro ejemplo hemos aplicado transform="rotate(a, x,y)" que produce una rotación de un ángulo de a grados, aplicada con el centro de rotación en el punto x,y.


Enero-2019 (V 2.2)
Pág. 16.11
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

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


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.