SVGAElement: rel-Eigenschaft

Baseline 2025

Neu verfügbar

Seit May 2025 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.

Die rel-Eigenschaft des SVGAElement gibt einen String zurück, der den Wert des rel-Attributs des SVG-<a>-Elements widerspiegelt.

Das rel-Attribut gibt die durch Leerzeichen getrennte Liste von Linktypen, die <list-of-Link-Types>, an, die die Beziehung zwischen dem Ziel oder der Ressource, die durch das <a>-Element dargestellt wird, und dem aktuellen Dokument beschreibt. Die Eigenschaft kann den Wert des rel-Attributs abrufen oder festlegen.

Wert

Ein String; der Wert des rel-Attributs.

Beispiele

Gegebenes SVG:

html

<svg viewBox="0 0 200 20" xmlns="http://www.w3.org/2000/svg">
  <!-- A link around a text -->
  <a href="/docs/Web/SVG/Reference/Element/text" rel="terms-of-service">
    <text x="30" y="10">Link text.</text>
  </a>
</svg>

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

#log {
  height: 70px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}
svg {
  height: 50px;
}
text {
  font-size: 1rem;
}

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

Wir können das rel-Attribut abrufen und festlegen:

// Select an SVG <a> element
const svgLink = document.querySelector("svg a");

// Access the rel property
log(`Rel: ${svgLink.rel}`);

// Set the rel property
svgLink.rel = "alternate bookmark";

// Access the rel property again
log(`New rel: "${svgLink.rel}"`); // New rel: "alternate bookmark"

Spezifikationen

Spezifikation
Scalable Vector Graphics (SVG) 2 # __svg__SVGAElement__rel

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden