SVG/Elemente/Text/tref

Aus SELFHTML-Wiki
< SVG‎ | Elemente‎ | Text
Wechseln zu: Navigation, Suche

Mit dem tref-Element können Sie Texte zentral in einem Definitionsabschnitt festlegen und über eine ID dem Element zuweisen[1]. Somit kann ein Text einmal festgelegt, aber beliebig oft referenziert werden. In SVG2 sollen auch externe Textdateien eingebunden werden können[2].

Achtung!

In SVG2 fällt das tref-Element aus der Empfehlung heraus. Um Texte mehrfach referenzieren zu können, verwenden Sie bitte das use-Element.[3][4]
  • SVG 1.1
  • Achtung
  • Leer
  • Leer
  • Leer
  • Leer
  • Leer
  • Safari
Beispiel ansehen …
<svg>
  <defs>
    <text id="ref">Texte referenzieren mit SVG</text>
  </defs>
 
  <text x="20" y="30">SVG
    <tref xlink:href="#ref" x="20" y="60"/>
    <tref xlink:href="#ref" x="30" dy="20" style="fill:#e32c04;"/>
    <tref xlink:href="#ref" x="40" dy="20" style="fill:#dfac20;"/>
    <tref xlink:href="#ref" x="50" dy="20" style="fill:#5a9900;"/>
    <tref xlink:href="#ref" x="60" dy="20" style="fill:#3983ab;"/>
  </text>
</svg>


Sie können den Text sowohl im Text-Element im Definitionsabschnitt, als auch im tref-Element positionieren und mit Text-Attributen gestalten.

Beachten Sie: Dieses Beispiel funktioniert nur im Safari-Browser! So sollte es aussehen:

Screenshot

Quellen[Bearbeiten]

  1. http://www.w3.org/TR/SVG/text.html#TRefElement
  2. http://www.w3.org/TR/2012/WD-SVG2-20120828/text.html#TRefElement
  3. http://lists.w3.org/Archives/Public/www-svg/2013Jun/0078.html
  4. https://svgwg.org/svg2-draft/single-page.html#changes-text

Referenz[Bearbeiten]