Content

<tref>
 Usage context
 Attributes
  Global attributes
  Specific attributes
 DOM Interface
 Example
 Specifications
 Sources and References

<tref>

~~Deprecated:~~ This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The textual content for a ~~<text>~~ SVG element can be either character data directly embedded within the ~~<text>~~ element or the character data content of a referenced element, where the referencing is specified with a ~~<tref>~~ element.

~~xlink:href~~

DOM Interface

This element implements the ~~SVGTRefElement~~ interface.

Example

SVG Code Input:

<?xml version="1.0" standalone="no"?>

    
<svg style='border:1px solid black' width='580' height='350' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
<svg width='526' height='326' viewBox='-25, -25, 526, 326' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <pattern id='pattern-halfgrid' x='0' y='0' width='5' height='5' patternUnits='userSpaceOnUse'>
       <path d='M 5 0 L 0 0 0 5' fill='none' stroke='red' stroke-width='0.2'/>
   </pattern>
   <pattern id='pattern-grid' x='0' y='0' width='10' height='10' patternUnits='userSpaceOnUse'>
       <rect width='10' height='10' fill='url(#pattern-halfgrid)' stroke-width='0'></rect>
       <path d='M 10 0 L 0 0 0 10' fill='none' stroke='black' stroke-width='0.2'/>
   </pattern>
   <rect x='0' y='0' width='100%' height='100%' fill='url(#pattern-grid)' stroke-width='0'></rect>
  
   <svg transform='scale(0.950570342205323)' preserveAspectRatio='xMinYMin'  width='100%' height='100%' viewBox='0 0 500 300' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
       <defs>
           <text id='ReferencedText'>
               Referenced character data
           </text>
       </defs>

       <text x='100' y='100' font-size='30' >
           Inline character data
       </text>

       <text x='100' y='200' font-size='30' fill='red' >
           <tref xlink:href='#ReferencedText'/>Deprecated or Not Support.
       </text>

       <!-- Show outline of canvas using 'rect' element -->
       <rect x='1' y='1' width='498' height='298' fill='none' stroke='black' stroke-width='12' />
   </svg>
  </svg>
<text x='5' y='17' font-size='20'>(0,0)</text>
<text x='495' y='17' font-size='20'>(500,0)</text>
<text x='5' y='345' font-size='20'>(0,300)</text>
<text x='495' y='345' font-size='20'>(500,300)</text>
<circle cx='25' cy='25' r='2' fill='black'/>
<circle cx='525' cy='25' r='2' fill='black'/>
<circle cx='25' cy='325' r='2' fill='black'/>
<circle cx='525' cy='325' r='2' fill='black'/>
</svg>

HTML Web Page Embedded Output: