Bildoben  
aptico-Home | AGB-(c) | SVG-Tutorial Inhalt
Schatten

SVG Tutorial

  svg tutorial index  |  Kapitel 8   

8.3 Texte referenzieren - das tref-Element

Das tref-Element ermöglicht die Einbindung von Textvorlagen an beliebigen Stellen in einem SVG-Dokument.
Diese Textvorlagen müssen innerhalb des SVG-Dokuments deklariert werden und - durch das Attribut id - eindeutig bezeichnet sein. Externe Textdateien können nicht eingebunden werden.

Für das tref-Element sind alle Attribute gültig, die auch für das text-Element oder das tspan-Element verwendet werden dürfen.

Beispiel Quellcode


   Grafische Darstellung:   SVG-Darstellung (nur SVG-fähige Browser!)    Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="330" height="180"
  xmlns:xlink="http://www.w3.org/1999/xlink">
<title>das tref-Element</title>
<desc>Texte referenzieren</desc>
<defs>
  <style type="text/css"><![CDATA[
    text {font-family:verdana,sans-serif; font-size:16px;}
  ]]></style>
  <text id="svgtxt">Scalable Vector Graphics</text>
</defs>

<text x="20" y="30" style="font-size:20px;">
SVG
<tref xlink:href="#svgtxt" x="20" y="60" />
<tref xlink:href="#svgtxt" x="30" dy="20" style="fill:red;" />
<tref xlink:href="#svgtxt" x="40" dy="20" style="fill:gray;" />
<tref xlink:href="#svgtxt" x="50" dy="20" style="fill:blue;" />
<tref xlink:href="#svgtxt" x="60" dy="20" style="fill:green;" />
</text>
</svg>
      

Im Beispiel wird eine Textvorlage mit der ID svgtxt im defs-Container der Grafik festgelegt, sie wird also an dieser Stelle nicht angezeigt.
Mit dem tref-Element wird diese Vorlage dann mehrmals in die Grafik eingebunden.




index  |  Kapitel 8  |  8.2  <<  | 8.3 |  >>  8.4   Rotation einzelner Zeichen