SVGAElement.rel — Eigenschaft · JavaScript-Referenz

Signatur

SVGAElement.rel

Beschreibung

Die Eigenschaft rel des Interfaces SVGAElement spiegelt das Inhaltsattribut rel eines <a>-Elements innerhalb von SVG wider. Der Wert ist eine durch Leerzeichen getrennte Liste von Linktypen wie noopener, noreferrer, nofollow oder external. Diese Linktypen beschreiben, in welcher Beziehung das aktuelle Dokument zum Ziel des Links steht.

Die Eigenschaft ist lesbar und schreibbar. Wenn du ihr einen Wert zuweist, wird das Attribut rel im DOM direkt geändert. Fehlt das Attribut, liefert die Eigenschaft einen leeren String "". Sie verhält sich also genauso wie HTMLAnchorElement.rel bei HTML-Links.

In der Praxis wirst du rel vor allem dann nutzen, wenn verlinkte Grafiken wie Diagramme, Karten oder Infografiken externe Ziele in einem neuen Tab öffnen (target="_blank"). Mit noopener bzw. noreferrer verhinderst du, dass die geöffnete Seite über window.opener auf deine Seite zugreift. Wenn du einzelne Linktypen bequem hinzufügen oder entfernen willst, verwende statt der Zeichenkette die Eigenschaft relList (DOMTokenList).

Parameter

Name	Typ	Default	Beschreibung
$value	string	""	Nur beim Setzen: eine durch Leerzeichen getrennte Liste von Linktypen, z. B. `"noopener noreferrer"`.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des rel-Attributs. Ist das Attribut nicht gesetzt, ist es ein leerer String.

Beispiele

rel-Wert eines SVG-Links auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const link = document.createElementNS(svgNS, 'a');
link.setAttribute('href', 'https://example.com');
link.setAttribute('rel', 'external nofollow');

console.log(link.rel);
console.log(link instanceof SVGAElement);

external nofollow true

Externe Links in einer Infografik absichern

// Alle SVG-Links, die in einem neuen Tab geöffnet werden, erhalten noopener/noreferrer
document.querySelectorAll('svg a[target="_blank"]').forEach((a) => {
  const tokens = new Set(a.rel.split(/\s+/).filter(Boolean));
  tokens.add('noopener');
  tokens.add('noreferrer');
  a.rel = [...tokens].join(' ');
  console.log(a.getAttribute('rel'));
});

noopener noreferrer

Fehlendes Attribut und Synchronisation mit dem DOM

const a = document.createElementNS('http://www.w3.org/2000/svg', 'a');
console.log(JSON.stringify(a.rel)); // leerer String

a.rel = 'help';
console.log(a.getAttribute('rel'));
console.log(a.outerHTML);

"" help <a xmlns="http://www.w3.org/2000/svg" rel="help"></a>

// Wichtig · Fallstricke

Browser-Unterstützung: Die Eigenschaft rel kam für SVGAElement erst relativ spät dazu (Chrome/Edge 107, Firefox 120, Safari 16.4). In älteren Browsern ist sie undefined. Für ältere Umgebungen verwende deshalb getAttribute('rel') und setAttribute('rel', …).
Namespace: Nur Elemente, die mit createElementNS('http://www.w3.org/2000/svg', 'a') erzeugt wurden oder innerhalb eines <svg> geparst wurden, sind SVGAElement-Instanzen. Mit document.createElement('a') entsteht dagegen ein HTML-Link.
Sicherheit: Bei target="_blank" setzen moderne Browser noopener für HTML-Links meist automatisch. Bei SVG-Links solltest du das nicht voraussetzen und noopener ausdrücklich angeben, um Reverse Tabnabbing zu verhindern.
Der Wert ist ein einfacher String. Groß- und Kleinschreibung sowie doppelte Einträge werden nicht normalisiert. Wenn du Linktypen prüfen oder ändern willst, ist relList.contains() bzw. relList.add() robuster.

Siehe auch

SVGAElement SVGAElement.relList SVGAElement.target SVGAElement.href HTMLAnchorElement.rel Element.setAttribute() HTMLTableElement.rules