Agrupar y reutilizar

facebook-svg gplus-svg twitter-svg

Mientras que sea posible dibujar en el lienzo sin agrupar los varios trazados que componen un dibujo, el SVG cuenta con varios elementos que nos permiten agrupar elementos y estructurar el documento.

Agrupar con <g>

El elemento <g> es un contenedor utilizado para agrupar objetos. Los atributos y las transformaciones aplicadas al elemento <g> son heredadas por todos los elementos hijos de este.
Cada grupo <g> puede tener un titulo <title> y una descripción <desc>, y aunque estos elementos no aparecen en pantalla, ofrecen claridad y son importantes de punto de vista semántico.

En el siguiente ejemplo agrupamos dentro del elemento <g> siete círculos ( <circle>) y un trazado ( <path>) para representar una flor. Solo el último circulo tiene definidos los atributos fill ( relleno ) y stroke ( trazo ). Los demás círculos heredan estos atributos de <g>.



 
  flor
  Una flor hecha con circulos
    
    
    
    
    
    
    
    
 
flor Una flor hecha con circulos

Reutilizar con <use>

Pero lo más importante es que con <g> podemos definir objetos complejos que pueden ser utilizados y reutilizados ulteriormente con <use>. Para poder reutilizarlo es importante, aunque no imprescindible, que el elemento <g> aparezca dentro del elemento <defs>. Los elementos que aparecen definidos dentro del elemento <defs> no aparecen en pantalla, pero pueden ser referenciados más tarde. Para esto normalmente se los asigna una identificación ( id ).

A continuación utilizamos el mismo grupo del ejemplo anterior, solo que esta vez el grupo tiene asignada una identificación ( id="flor" ), y lo ponemos dentro de un elemento <defs>.

Para que el elemento aparezca en pantalla utilizamos el elemento <use>. El atributo xlink:href de este especifica el elemento que queremos referenciar:

<use xlink:href ="#flor" fill="Gold" x="-60" y="0" />

mientras que los atributos x e y especifican la posición de la nueva flor relativamente al punto 0,0 del grupo referenciado.

<use xlink:href ="#flor" fill="Gold" x="-60" y="0" />

Por ejemplo: la flor azul ( fill="CornflowerBlue" ) no tiene especificados los atributos x e y, y aparece en el mismo punto que en el ejemplo anterior. Por de otra parte los atributos x e y de la flor amarilla ( fill="Gold" ) son x = "-60" e y = "0", lo que hace que la flor aparezca desplazada 60px hacia la izquierda relativamente al original.

See the Pen Agrupar y reutilizar by Gabi (@enxaneta) on CodePen.