Elemento <defs> de SVG

El elemento <defs> de SVG se utiliza para insertar definiciones que se pueden reutilizar dentro de una imagen SVG. Por ejemplo, puede agrupar formas SVG y usarlas como una única forma repetida.

Ejemplo de defs

Este es un ejemplo simple de elemento <defs>:

<svg>
　　　　<defs>
　　　　　　　　<g>
　　　　　　　　　　　　<rect x="100"y="100"width="100"height="100"　/>
　　　　　　　　　　　　<circle cx="100"cy="100"r="100"　/>
　　　　　　　　</g>
　　　　</defs>
</svg>

Las formas definidas en el elemento <defs> no se muestran en la imagen SVG. Antes de mostrarlas, deben ser referenciadas por un elemento <use>. A continuación se muestra un ejemplo:

<svg width="500"height="100">
　　　　<defs>
　　　　　　　　<g id="shape">
　　　　　　　　　　　　<rect x="0" y="0" width="50"height="50"></rect>
　　　　　　　　　　　　<circle cx="0" cy="0" r="50"></circle>
　　　　　　　　</g>
　　　　</defs>
　　　　<use xlink:href="#shape" x="50"y="50"></use>
　　　　<use xlink:href="#shape" x="200"y="50"></use>
　　　　<circle cx="50"cy="50"r="5"style="fill:#0000ff;"/circle>
　　　　<circle cx="200"cy="50"r="5"style="fill:#0000ff;"/circle>
</svg>

Antes de poder referirse al elemento <g>, debe establecer un ID para él a través de su atributo id. El elemento <use> referencia al elemento <g> a través de su atributo xlink:href. Tenga en cuenta que el ID antes del valor de atributo comienza con #.

El elemento <use> especifica dónde mostrar la forma repetida a través de sus atributos x e y. Tenga en cuenta que las formas dentro del elemento <g> están ubicadas en 0,0. Esto se hace porque sus posiciones se han agregado al elemento <use> especificado.

Efecto de la imagen después de ejecutar:

El punto azul no está en el ejemplo. Se agregaron para mostrar los x e y de dos elementos <use>.

¿Qué elementos se pueden definir en el elemento <defs>?

Puede agregar los siguientes elementos al elemento <defs>:

• Cualquier elemento de forma (rect, línea, etc.)

• g

• symbol