Elemento <use> en SVG

El elemento <use> de SVG puede reutilizar formas SVG en otras ubicaciones (incluidos elementos <g> y <symbol>) en el documento SVG. Se puede definir una forma de reutilización dentro (haciendo que la forma sea invisible hasta que se utilice) o fuera del elemento <defs>.

Ejemplo de uso

Este es un ejemplo simple del elemento <use>:

<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>

Este ejemplo muestra el elemento <g> definido dentro del elemento <defs>. Esto hace que <g> sea invisible a menos que sea referido por un elemento <use>.

Antes de referirse al elemento <g>, debe asignar un ID a través de su atributo ID. El elemento <use> lo hace a través del atributo xlink:href. Note que hay un # antes del valor del atributo.

El elemento <use> especifica dónde mostrar la forma reutilizada mediante 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 lugar especificado en el elemento <use>.

Efecto de la imagen después de ejecutar:

El punto azul no es parte del ejemplo. Se agregó para mostrar las coordenadas x e y de dos elementos <use>.

Uso de la forma fuera del elemento <defs>

El elemento <use> puede reutilizar cualquier elemento en cualquier lugar de la imagen SVG, siempre que la forma tenga un atributo id con un valor único. Aquí hay un ejemplo:

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

Este ejemplo define un elemento <g> que contiene un elemento <rect>. Luego, reutiliza el elemento <g> (que incluye el elemento <rect> anidado) a través del elemento <use>.

Efecto de la imagen después de ejecutar:

Tenga en cuenta que se muestra tanto la forma original como su versión reutilizada. Esto ocurre porque no se ha definido la forma que se debe reutilizar (elemento <g>) dentro del elemento <defs> o <symbol>. Por lo tanto, es visible.

Del mismo modo, los puntos azules muestran las coordenadas del elemento <use>.

Configuración de estilo CSS

Si no se ha configurado el estilo CSS en la forma original, se puede configurar el estilo CSS al reutilizar la forma. Simplemente especifique los estilos que se deben establecer en el atributo style del elemento <use>. Aquí hay un ejemplo:

<svg　width="500"　height="110">
　　<g　id="shape3">
　　　　　　<rect　x="0"　y="0"　width="50"　height="50"　/>
　　</g>
　　<use　xlink:href="#shape3"　x="100"　y="50"　style="fill:　#00ff00;"/>
　　<use　xlink:href="#shape3"　x="200"　y="50"　style="stroke:　#00ff00;　fill:　none;"/>
</svg>

Tenga en cuenta que no se ha configurado la propiedad de estilo en la forma original. Luego se utilizará el estilo predeterminado (generalmente negro) para renderizar.