Tutoriales de SVG

Elemento SVG

Elemento <textPath> SVG Elemento <tspan> SVG

Elemento <tref> SVG

El elemento <tref> de SVG se utiliza para referenciar el texto definido por el elemento <defs>. De esta manera, puede mostrar el mismo texto varias veces en la imagen SVG, sin necesidad de incluir múltiples elementos <text>.

Ejemplo en línea

Este es un ejemplo:

Ejemplo

<svg width="100%" height="100%" viewBox="0 0　1000　300"
　　　　　xmlns="http://www.w3.org/2000/svg"　
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink="http:
　　<defs>
　　　　<text id="ReferencedText">
　　　　　　Datos de caracteres referenciados (oldtoolbag.com) </text>
　　</defs>
　　<text x="100" y="100" font-size="45" >
　　　　Caracteres en línea de datos (oldtoolbag.com) </text>
　　<text x="100" y="200" font-size="45" fill="red" >
　　　　<tref xlink:href="#ReferencedText"/>
　　</text>
　　<!--　Usar el elemento "rect" para mostrar el contorno del lienzo　-->
　　<rect x="1" y="1" width="598" height="198"
　　　　　　　　fill="none" stroke-width="2"　/></svg>

Prueba y mira‹/›

Efecto de imagen después de ejecutar:

Atención, el elemento <text> (dentro del elemento <defs>) tiene una propiedad id. Este valor de id se refiere al atributo xlink:href del elemento <tref>.

Elemento <textPath> SVG Elemento <tspan> SVG