SVGAElement: port property

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The port property of the SVGAElement interface represents the port number of the SVG <a> element's href. If the port is the default for the protocol (80 for ws: and http:, 443 for wss: and https:, and 21 for ftp:), this property contains an empty string, "".

This property can be set to change the port of the URL. If the URL has no host or its scheme is file:, then setting this property has no effect. Invalid port numbers are silently ignored. Setting it also rewrites the element's href attribute as a complete, absolute URL.

See URL.port for more information.

<svg viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg">
  <a id="link" href="https://example.com:443/">
    <text x="0" y="20">Example</text>
  </a>
</svg>

<pre id="log"></pre>

svg {
  width: 200px;
  height: 30px;
}
svg a text {
  fill: blue;
  text-decoration: underline;
}
#log {
  padding: 0.5rem;
  border: 1px solid black;
}

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
}

We can read the port of the link, which is empty for the default port of the scheme:

const link = document.getElementById("link");

log(`port: "${link.port}"`); // port: ""

link.setAttribute("href", "https://example.com:8888/");
log(`port: "${link.port}"`); // port: "8888"