SVG - Scalable Vector Graphics
- SVG Tutorial
- SVG Examples
- A Simple SVG Example
- Displaying SVG in Web Browsers
- SVG Icons
- SVG Coordinate System
- SVG svg element
- SVG g element
- SVG rect element
- SVG circle element
- SVG ellipse element
- SVG line element
- SVG polyline element
- SVG polygon element
- SVG path element
- SVG marker element
- SVG text element
- SVG tspan element
- SVG tref element
- SVG textpath element
- SVG switch element
- SVG image element
- SVG a element
- SVG defs Elements
- SVG symbol Element
- SVG use Element
- SVG and CSS - Cascading Style Sheets
- SVG Stroke
- SVG Fill
- SVG Viewport and View Box
- SVG Animation
- SVG Scripting
- SVG Transformation
- SVG Gradients
- SVG Fill Patterns
- SVG Clip Path
- SVG Masks
- SVG Filters
SVG tref element
Jakob Jenkov |
The SVG <tref> element is used to reference texts that are defined by the <defs>
element. This way you can display the same text multiple times in your SVG image, without having to
include the text more than once.
Here is an example:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<text id="theText">A text that is referenced.</text>
</defs>
<text x="20" y="10">
<tref xlink:href="#theText" />
</text>
<text x="30" y="30">
<tref xlink:href="#theText" />
</text>
</svg>
And here is the resulting image:
Notice how the <text> element (inside the <defs> element) has an
id attribute. This id attribute value is referenced from the xlink:href
attribute of the <tref> element.
Next: SVG textpath element
| Tweet | |
Jakob Jenkov | |







