SVG/Elemente/title

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

Das title-Element der SVG-Grafik oder Gruppierungselementen wie symbol, pattern, linearGradient eine Beschreibung, die nicht als Teil der graphischen Darstellung gerendert wird, in der Regel bei :hover jedoch als Tooltipp erscheint.
Wichtiger ist die Bedeutung des Elements als Teil des zugänglichen Namens, der Nutzern von Screenreadern als textliche Alternative ausgegeben wird.
Weil Browser dieses Element nicht ausgeben müssen und Tooltipps von Nutzern oft unbemerkt bleiben, sollten Beschreibungen, möglichst mit sichtbarem Text vorgenommen werden. Mit aria-labelledby lässt sich dieser für assistive Technologien referenzieren.

Beispiel
<svg> <title>Beispiele für lineare Farbverläufe</title> <defs> <desc>Hier werden die Farbverläufe definiert und über die id dann aufgerufen</desc> <linearGradient id="verlauf1" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stop-color="#dfac20" /> <stop offset="100%" stop-color="#3983ab" /> </linearGradient> <linearGradient id="verlauf2" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="#dfac20" /> <stop offset="100%" stop-color="#3983ab" /> </linearGradient> <linearGradient id="verlauf3" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#dfac20" /> <stop offset="100%" stop-color="#3983ab" /> </linearGradient> </defs> ... </svg>
Beachten Sie: Das title-Element sollte aus Gründen der Abwärtskompatibilität mit SVG 1.1 das erste Kind des Elternelements sein.
In SVG ist es anders als in HTML möglich und erlaubt, mehrere title-Elemente zu verwenden.
Auch bei einer Einbindung in HTML ist neben dem HTML-title-Element ein weiteres SVG-title-Element im Inline-SVG zulässig.
Empfehlung: Verwenden Sie Beschreibungen, um Ihre Webseite zugänglicher für Screenreader zu machen.

Weblinks

Start-Tag: notwendig
End-Tag: notwendig
<title>…</title>
Elternelemente Darf vorkommen in:

svg, alle Gruppierungselemente

erlaubte Inhalte

Zeichenkette

Browsersupport Details: {{{caniuse}}}
Attribute
Name Inhalt Standardwert Bedeutung
Kernattribute
class ID ordnet ein Element einer oder mehreren Klassen zu.
id ID identifiziert ein einziges Element innerhalb eines Dokuments
lang ID identifiziert eine Sprachangabe
style ID CDATA Stilangabe durch Präsentationsattribute
tabindex ID macht Element „antabbbar“
xml:base CDATA Basis-URL
xml:lang Sprachkürzel legt eine den IANA-Sprachdefinitionen folgende Sprache des Elementinhalts fest [RFC1766]
xml:space default, preserve Verhalten gegenüber whitespace)

Attribut: Pflichtattribut
Attribut: optionales Attribut