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.