SVGAElement.type — Eigenschaft · JavaScript-Referenz

Signatur

SVGAElement.type

Beschreibung

Die Eigenschaft type der Schnittstelle SVGAElement spiegelt das Inhaltsattribut type eines <a>-Elements innerhalb von SVG wider. Sie enthält einen String mit dem MIME-Typ, den die Link-Zielressource voraussichtlich hat, z. B. "image/svg+xml", "application/pdf" oder "text/html".

Der Wert ist nur ein Hinweis (Advisory Hint). Der Browser prüft ihn nicht und verwendet ihn weder beim Laden noch beim Aushandeln des Inhalts. Maßgeblich bleibt der Content-Type-Header, den der Server sendet. Nützlich ist die Eigenschaft vor allem für eigene Logik: Sie können damit Link-Symbole anzeigen (z. B. ein PDF-Symbol), Links filtern oder Barrierefreiheits-Hinweise erzeugen.

Die Eigenschaft lässt sich lesen und schreiben. Wenn Sie ihr einen Wert zuweisen, wird das Attribut type gesetzt. Fehlt das Attribut, liefert sie einen leeren String. Das Verhalten entspricht HTMLAnchorElement.type bei HTML-Links.

Rückgabewert

Typ

string

Beschreibung

Der Wert des Attributs type, also ein MIME-Typ wie "application/pdf". Fehlt das Attribut, ist es ein leerer String "".

Beispiele

MIME-Typ eines SVG-Links auslesen

// HTML: <svg><a id="doku" href="handbuch.pdf" type="application/pdf"><text x="10" y="20">Handbuch</text></a></svg>
const link = document.querySelector('svg a#doku');
console.log(link instanceof SVGAElement);
console.log(link.type);

true application/pdf

Typ dynamisch setzen und Attribut prüfen

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');
const a = document.createElementNS(svgNS, 'a');
a.setAttribute('href', 'grafik.svg');
a.type = 'image/svg+xml';

const text = document.createElementNS(svgNS, 'text');
text.setAttribute('x', '10');
text.setAttribute('y', '40');
text.textContent = 'Grafik öffnen';
a.append(text);
svg.append(a);

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

image/svg+xml

PDF-Links in einer SVG-Grafik markieren (mit Rückfall)

// Rückfall auf getAttribute, falls der Browser die Eigenschaft nicht kennt
const getLinkType = (a) =>
  'type' in a ? a.type : (a.getAttribute('type') ?? '');

const pdfLinks = [...document.querySelectorAll('svg a')]
  .filter((a) => getLinkType(a) === 'application/pdf');

pdfLinks.forEach((a) => {
  a.setAttribute('aria-label', `${a.textContent.trim()} (PDF)`);
});

console.log(`${pdfLinks.length} PDF-Link(s) markiert`);

1 PDF-Link(s) markiert

// Wichtig · Fallstricke

Nur ein Hinweis: Der Browser prüft den Wert nicht. Ein falscher type ändert weder das Laden noch die Darstellung der Ressource. Entscheidend ist der Content-Type des Servers.
Browser-Kompatibilität: Die Eigenschaft gehört zu den Link-Eigenschaften, die mit SVG 2 hinzukamen (wie hreflang, rel und download). Die Browser unterstützen sie nicht einheitlich. Prüfen Sie daher mit 'type' in SVGAElement.prototype, ob sie vorhanden ist. Das Attribut selbst können Sie immer über getAttribute('type') lesen.
Nicht verwechseln mit SVGAnimatedString: Anders als href oder target ist type ein einfacher String, kein Objekt mit baseVal/animVal.
SVG-Elemente müssen Sie mit document.createElementNS('http://www.w3.org/2000/svg', 'a') erzeugen. document.createElement('a') liefert dagegen ein HTMLAnchorElement.
Der Wert wird nicht normalisiert: Groß- und Kleinschreibung sowie Parameter wie ; charset=utf-8 bleiben erhalten. Wenn Sie Werte vergleichen, sollten Sie selbst normalisieren, z. B. mit toLowerCase().

Siehe auch

SVGAElement SVGAElement.href SVGAElement.hreflang SVGAElement.target HTMLAnchorElement.type Element.getAttribute() HTMLSourceElement.type