SVGAElement: interestForElement-Eigenschaft

Wert

Eine Instanz eines Element-Objekts oder null, wenn das zugehörige <a>-Element kein Zielelement festgelegt hat.

Beispiele

Grundlegende Nutzung von interestForElement

In diesem Beispiel verwenden wir die interestForElement-Eigenschaft eines SVG-<a>-Elements, um dessen Zielelement festzulegen und dann den tagName des Zielelements abzurufen. Der tagName wird dann in den Textinhalt des <a>-Elements aufgenommen.

HTML

Die Markierung enthält ein SVG-<a>-Element mit einem <text>-Element, und der Linktext ist innerhalb des <text>-Elements enthalten. Es gibt auch ein HTML-<div>-Element. Wir machen das <div>-Element zu einem Popover, indem wir das popover-Attribut darauf setzen.

<svg>
  <a href="#">
    <text x="90" y="20" text-anchor="middle">A link</text>
  </a>
</svg>
<div id="mypopover" popover>I am a <code>&lt;div&gt;</code> element.</div>

svg {
  width: 200px;
  height: 100px;
}

svg a text {
  fill: blue;
  text-decoration: underline;
}

JavaScript

Wir erhalten Referenzen auf die <a>, <text> und <div> Elemente im Script. Dann erstellen wir die "interest invoker"-Ziel-Beziehung zwischen dem <a> und dem <div>, indem wir die interestForElement-Eigenschaft des <a>-Elements auf eine Referenz auf das <div> setzen. Anschließend aktualisieren wir den <text>-Inhalt, um den tagName des Zielelements anzuzeigen, abgerufen über invoker.interestForElement.tagName.

const invoker = document.querySelector("a");
const invokerText = document.querySelector("text");
const popover = document.querySelector("div");

invoker.interestForElement = popover;

invokerText.textContent = `My target is a ${invoker.interestForElement.tagName} element`;

Ergebnis

Das Beispiel wird wie folgt dargestellt:

Versuchen Sie, Interesse am Link zu zeigen (zum Beispiel durch Hovern oder Fokussieren), um das <div> erscheinen zu lassen.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Using interest invokers
• The Popover API