Agrupar y reutilizar
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>.
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.