SVGAElement.interestForElement — Eigenschaft · JavaScript-Referenz

Signatur

SVGAElement.interestForElement

Beschreibung

Die Eigenschaft interestForElement des SVGAElement-Interfaces ist das DOM-Gegenstück zum Attribut interestfor eines SVG-<a>-Elements. Sie gibt eine direkte Referenz auf das Element zurück, das als Ziel des Interesse-Initiators (engl. interest invoker) festgelegt ist, und nimmt beim Setzen ebenfalls eine Element-Referenz entgegen. Die Eigenschaft ist also nicht die ID als Zeichenkette, sondern das Element selbst.

Interesse-Initiatoren sind ein neuer Mechanismus der Webplattform: Zeigt der Nutzer „Interesse“ an einem Element – etwa durch Überfahren mit der Maus (Hover), Fokussieren per Tastatur oder langes Drücken auf Touch-Geräten –, erhält das Zielelement ein interest-Ereignis. Verliert der Nutzer das Interesse, folgt loseinterest. Ist das Ziel ein Popover (popover="hint" oder popover="auto"), wird es automatisch angezeigt bzw. ausgeblendet. So lassen sich Tooltips, Vorschaukarten und Hover-Menüs ganz ohne eigenes Mouse-/Focus-Event-Handling bauen.

Für SVG ist das besonders praktisch, wenn Diagramme, Karten oder Infografiken klickbare Bereiche (<a> um Formen) enthalten, die beim Überfahren Zusatzinformationen in einem HTML-Popover zeigen sollen. Über interestForElement kann man die Verknüpfung dynamisch per JavaScript herstellen – auch zu Elementen, deren ID man nicht kennt oder die gar keine ID haben.

Parameter

Name	Typ	Default	Beschreibung
$wert (beim Setzen)	Element \| null	null	Das Zielelement, das bei Interesse benachrichtigt bzw. als Popover angezeigt werden soll. `null` entfernt die Verknüpfung (und das `interestfor`-Attribut).

Rückgabewert

Typ

Element | null

Beschreibung

Das referenzierte Zielelement oder null, wenn kein gültiges Ziel gesetzt ist bzw. die im Attribut interestfor angegebene ID nicht auflösbar ist.

Beispiele

Ziel eines SVG-Links auslesen

// HTML:
// <svg width="200" height="100">
//   <a id="kreis-link" href="/details" interestfor="kreis-info">
//     <circle cx="50" cy="50" r="40" fill="teal" />
//   </a>
// </svg>
// <div id="kreis-info" popover="hint">Umsatz Q1: 42.000 €</div>

const link = document.getElementById('kreis-link');
console.log(link.interestForElement?.id);
console.log(link.getAttribute('interestfor'));

kreis-info kreis-info

Tooltip dynamisch per JavaScript verknüpfen

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');

// Popover ohne ID erzeugen
const tooltip = document.createElement('div');
tooltip.popover = 'hint';
tooltip.textContent = 'Region Nord: 1.234 Kunden';
document.body.append(tooltip);

// SVG-Link mit Rechteck erzeugen
const link = document.createElementNS(svgNS, 'a');
link.setAttribute('href', '/regionen/nord');
const rect = document.createElementNS(svgNS, 'rect');
rect.setAttribute('width', '80');
rect.setAttribute('height', '40');
link.append(rect);
svg.append(link);

// Verknüpfung direkt über die Element-Referenz
if ('interestForElement' in link) {
  link.interestForElement = tooltip;
  console.log(link.interestForElement === tooltip);
} else {
  console.log('Interest Invokers werden nicht unterstützt');
}

true

Auf interest/loseinterest reagieren und Verknüpfung lösen

const link = document.getElementById('kreis-link');
const info = link.interestForElement;

info?.addEventListener('interest', (event) => {
  // event.source ist der Initiator, hier der SVG-Link
  console.log('Interesse von:', event.source.id);
});

info?.addEventListener('loseinterest', () => {
  console.log('Interesse verloren');
});

// Später: Verknüpfung entfernen
const trennen = () => {
  link.interestForElement = null;
  console.log(link.hasAttribute('interestfor'));
};

trennen();

false

// Wichtig · Fallstricke

Experimentell: Interest Invokers sind derzeit nur in Chromium-basierten Browsern (ab etwa Version 142) verfügbar. Firefox und Safari unterstützen sie noch nicht – immer per 'interestForElement' in element prüfen und einen Fallback (z. B. <title> in SVG oder eigene pointerenter/focus-Handler) vorsehen.
Element statt ID: Beim Setzen eine Element-Referenz übergeben, keine Zeichenkette. Das Attribut interestfor wird dabei auf einen leeren Wert gesetzt; die Referenz wird intern gehalten. Wer IDs verwenden möchte, nutzt setAttribute('interestfor', 'id').
Scope-Regeln: Wie bei popoverTargetElement und commandForElement gelten Einschränkungen über Shadow-DOM-Grenzen hinweg – ein Ziel in einem fremden Shadow-Root liefert beim Lesen ggf. null.
Barrierefreiheit: Hover-only-Inhalte sind problematisch. Interest Invokers reagieren zwar auch auf Tastaturfokus, der SVG-Link muss dafür aber fokussierbar sein (gültiges href). Wichtige Informationen nicht ausschließlich im Tooltip verstecken.
Die Verzögerung bis zum Auslösen lässt sich per CSS mit interest-delay (bzw. interest-delay-start/-end) steuern.

Siehe auch

SVGAElement HTMLAnchorElement.interestForElement HTMLButtonElement.interestForElement InterestEvent HTMLButtonElement.popoverTargetElement HTMLElement.showPopover()