SVGAElement.port — Eigenschaft · JavaScript-Referenz

Signatur

SVGAElement.port

Beschreibung

Die Eigenschaft port gehört zu den URL-Zerlegungs-Eigenschaften, die SVG 2 für SVGAElement aus dem Mixin HTMLHyperlinkElementUtils übernimmt – also dieselben Eigenschaften, die man von HTMLAnchorElement kennt (protocol, host, hostname, pathname, search, hash …). Sie gibt den Port-Teil der Ziel-URL des Links als String zurück.

Ist in der URL kein Port angegeben oder entspricht er dem Standard-Port des Schemas (80 bei http:, 443 bei https:), ist der Wert ein leerer String. Relative URLs werden vorher gegen die Basis-URL des Dokuments aufgelöst.

Beim Setzen wird der Port-Teil der URL ersetzt und das href-Attribut entsprechend aktualisiert. Ungültige Werte (z. B. nicht-numerische Zeichen am Anfang) werden ignoriert; ein leerer String entfernt den Port.

Typische Einsätze: Links in interaktiven SVG-Grafiken (Diagramme, Karten, Dashboards) prüfen oder umschreiben, etwa um zwischen Entwicklungs- und Produktivserver zu wechseln. Weil die Unterstützung in Browsern lückenhaft ist, sollte man in der Praxis meist über new URL() und SVGAElement.href.baseVal gehen.

Rückgabewert

Typ

string

Beschreibung

Die Portnummer als String (z. B. "8080") oder "", wenn kein bzw. der Standard-Port verwendet wird. In Browsern ohne Unterstützung ist die Eigenschaft undefined.

Beispiele

Port eines SVG-Links auslesen (mit Fallback)

const svgNS = 'http://www.w3.org/2000/svg';
const link = document.createElementNS(svgNS, 'a');
link.setAttribute('href', 'https://example.com:8443/report?id=7');

// Feature-Erkennung: port ist nicht in allen Browsern implementiert
const getPort = (a) =>
  typeof a.port === 'string'
    ? a.port
    : new URL(a.href.baseVal, document.baseURI).port;

console.log(getPort(link));

8443

Standard-Port ergibt leeren String

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

const port = new URL(link.href.baseVal, document.baseURI).port;
console.log(JSON.stringify(port)); // 443 ist Standard für https

""

Alle SVG-Links auf einen Entwicklungsport umschreiben

const DEV_PORT = '3000';

document.querySelectorAll('svg a').forEach((a) => {
  if ('port' in a) {
    a.port = DEV_PORT; // aktualisiert href automatisch
  } else {
    const url = new URL(a.href.baseVal, document.baseURI);
    url.port = DEV_PORT;
    a.setAttribute('href', url.href);
  }
  console.log(a.getAttribute('href'));
});

http://localhost:3000/diagramm/knoten-1

// Wichtig · Fallstricke

Browser-Kompatibilität: Die URL-Zerlegungs-Eigenschaften auf SVGAElement (darunter port) stammen aus SVG 2 und sind in den gängigen Browsern nicht bzw. nur teilweise implementiert. Immer per 'port' in element prüfen und auf new URL(element.href.baseVal, document.baseURI).port ausweichen.
Anders als bei HTMLAnchorElement ist SVGAElement.href kein String, sondern ein SVGAnimatedString – für die URL daher href.baseVal bzw. getAttribute('href') verwenden.
Ältere SVG-Dateien nutzen xlink:href statt href; dann liefert getAttribute('href') null – ggf. getAttributeNS('http://www.w3.org/1999/xlink', 'href') abfragen.
Der Rückgabewert ist ein String, keine Zahl – für Vergleiche Number(port) verwenden und den leeren String (Standard-Port) berücksichtigen.
Beim Umschreiben von Links aus fremden Quellen darauf achten, keine javascript:-URLs zu übernehmen (XSS-Risiko); nur http:/https: zulassen.

Siehe auch

SVGAElement SVGAElement.href SVGAElement.host SVGAElement.hostname HTMLAnchorElement.port URL.port HTMLTableElement.rows