D3.js
Author

(Rocha, 2019, pp. 37-38)

Reutilización de objetos: uso y definiciones

Un SVG puede tener un encabezado <defs> que contiene formas, grupos y otros elementos que no se mostrarán. Los filtros, las máscaras de recorte, los degradados y las formas reutilizables suelen declararse en el encabezado <defs>. Deberá asignar un id a cada elemento que desee reutilizar posteriormente.

El elemento se puede mostrar posteriormente declarando el elemento <use> fuera del bloque <defs>. Este elemento referencia a un elemento existente mediante id utilizando la notación estándar xlink.

En el siguiente ejemplo, se crean dos rectángulos en 0.0. Dado que se encuentran en el encabezado <defs>, no se mostrarán. Cada uno está configurado previamente con colores, dimensiones y posición. Fuera del encabezado <defs>, cada elemento se muestra dos veces cuando se hace referencia a él desde cada elemento <use>, transfiriéndolo a una posición diferente:

<style>
    svg {
        border: solid 1px lightgray;
    }
</style>
<body>
<h2>SVG reusing objects: no reuse</h2>
<svg width="400" height="200">
    <defs>
        <rect id="black"  x="0" y="0" width="20" height="20" fill="rgb(64,32,32)" />
        <rect id="white" x="0" y="0" width="20" height="20" fill="rgb(255,225,200)" />
    </defs>
    <g transform="translate(10,10) scale(3)">
        <use xlink:href="#black" />
        <use xlink:href="#white" transform="translate(20)"/>
        <use xlink:href="#white" transform="translate(0,20)"/>
        <use xlink:href="#black"  transform="translate(20,20)"/>
    </g>
</svg>
</body>

El resultado se muestra en la siguiente imagen. Puedes usarla para crear un tablero de ajedrez.

SVG reusing objects: no reuse

Rara vez utilizarás <defs> y <use> en D3, pero colocar código reutilizable, como máscaras de recorte, filtros y degradados en un encabezado <defs>, es una buena práctica.