SVGAElement.hreflang — Eigenschaft · JavaScript-Referenz

Signatur

SVGAElement.hreflang

Beschreibung

Die Eigenschaft hreflang der Schnittstelle SVGAElement spiegelt das gleichnamige Inhaltsattribut eines <a>-Elements in SVG wider. Sie gibt einen String zurück, der die Sprache der verlinkten Ressource angibt, z. B. "de", "en-US" oder "fr-CA". Der Wert muss ein gültiges Sprach-Tag nach BCP 47 sein.

Die Eigenschaft ist lesbar und schreibbar. Beim Setzen wird das Attribut hreflang am Element geändert; beim Lesen bekommst du den aktuellen Attributwert. Ist das Attribut nicht vorhanden, ist der Wert ein leerer String "".

Die Angabe ist nur ein Hinweis: Der Browser ändert dadurch weder das Navigationsverhalten noch wird etwas übersetzt. Hilfstechnologien, Suchmaschinen oder deine eigenen Skripte können den Wert aber auswerten, etwa um Links zu fremdsprachigen Inhalten zu markieren, mit einem Sprachsymbol zu versehen oder zu filtern. Das Verhalten entspricht HTMLAnchorElement.hreflang.

Rückgabewert

Typ

string

Beschreibung

Das Sprach-Tag der verlinkten Ressource (z. B. "en"). Fehlt das Attribut, ist der Wert ein leerer String. Beim Setzen wird der String unverändert in das Attribut hreflang geschrieben.

Beispiele

Sprache eines SVG-Links auslesen

// <svg><a id="doku" href="https://example.com/en/docs" hreflang="en"><text x="10" y="20">Docs</text></a></svg>
const link = document.querySelector('svg a#doku');

console.log(link instanceof SVGAElement); // true
console.log(link.hreflang);

true en

hreflang per Skript setzen (mit Feature-Erkennung)

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');

const a = document.createElementNS(svgNS, 'a');
a.setAttribute('href', 'https://example.com/fr/');

if ('hreflang' in SVGAElement.prototype) {
  a.hreflang = 'fr';
} else {
  // Rückfall für Browser ohne die Eigenschaft
  a.setAttribute('hreflang', 'fr');
}

const text = document.createElementNS(svgNS, 'text');
text.setAttribute('x', '10');
text.setAttribute('y', '40');
text.textContent = 'Version française';
a.append(text);
svg.append(a);

console.log(a.getAttribute('hreflang'));

fr

Fremdsprachige Links in einer SVG-Grafik markieren

const pageLang = document.documentElement.lang || 'de';

document.querySelectorAll('svg a[hreflang]').forEach((link) => {
  // Mit getAttribute als Rückfall, falls die Eigenschaft fehlt
  const lang = link.hreflang ?? link.getAttribute('hreflang');
  const base = lang.split('-')[0].toLowerCase();

  if (base && base !== pageLang.split('-')[0]) {
    link.classList.add('fremdsprache');
    const title = document.createElementNS('http://www.w3.org/2000/svg', 'title');
    title.textContent = `Link führt zu Inhalt in: ${lang}`;
    link.prepend(title);
  }
});

// Wichtig · Fallstricke

Browser-Kompatibilität: Die Eigenschaft wurde mit SVG 2 eingeführt und wird noch nicht von allen Browsern unterstützt. In älteren Engines ist link.hreflang undefined. Prüfe das mit 'hreflang' in SVGAElement.prototype oder greif auf getAttribute('hreflang') / setAttribute('hreflang', …) zurück, das funktioniert überall.
Keine Prüfung: Der Browser kontrolliert nicht, ob der Wert ein gültiges BCP-47-Tag ist. Auch "xyz!" wird ohne Fehler übernommen.
Nur ein Hinweis: hreflang hat keinen Einfluss auf das Laden der Ressource und ersetzt keinen Content-Language-Header.
Nicht verwechseln mit dem Attribut lang bzw. xml:lang: Diese beschreiben die Sprache des Elementinhalts, hreflang dagegen die Sprache des Linkziels.
Im Unterschied zu SVGAElement.href, das ein SVGAnimatedString liefert, ist hreflang ein einfacher String.

Siehe auch

SVGAElement SVGAElement.href SVGAElement.type SVGAElement.rel HTMLAnchorElement.hreflang Element.getAttribute() HTMLTrackElement.srclang