SVGElement.focus() — Methode · JavaScript-Referenz

Signatur

SVGElement.prototype.focus(options)

Beschreibung

Die Methode focus() gibt es auf SVGElement genauso wie auf HTMLElement. Sie macht das Element zum aktiven Element des Dokuments (document.activeElement). Danach gehen Tastatureingaben an dieses Element, und die Events focus und focusin werden ausgelöst.

Die meisten SVG-Elemente sind von sich aus nicht fokussierbar. Fokussierbar sind vor allem <a>-Elemente mit href und alle Elemente mit dem Attribut tabindex. Mit tabindex="0" kommt ein Element in die normale Tab-Reihenfolge. Mit tabindex="-1" lässt es sich nur per Skript fokussieren. Ist ein Element nicht fokussierbar, macht der Aufruf nichts und meldet auch keinen Fehler.

Typische Einsatzfälle sind interaktive Diagramme, Karten und Infografiken, die man mit der Tastatur bedienen können soll: Man wechselt zum Beispiel mit den Pfeiltasten zwischen Balken oder Regionen und setzt den Fokus dabei gezielt per Skript. Mit dem Optionsobjekt verhindert man auf Wunsch, dass der Browser zum Element scrollt (preventScroll), oder man erzwingt einen sichtbaren Fokusring (focusVisible).

Parameter

Name	Typ	Default	Beschreibung
$options	object	{}	Optionales Objekt, mit dem man das Fokusverhalten steuert.
$options.preventScroll	boolean	false	Bei `true` scrollt der Browser das Element nicht in den sichtbaren Bereich.
$options.focusVisible	boolean	vom Browser bestimmt	Bei `true` wird ein sichtbarer Fokusring erzwungen, bei `false` unterdrückt. Ohne Angabe entscheidet der Browser selbst (Heuristik für `:focus-visible`).

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined).

Beispiele

SVG-Kreis fokussierbar machen und fokussieren

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
svg.setAttribute('width', '120');
svg.setAttribute('height', '120');

const circle = document.createElementNS(svgNS, 'circle');
circle.setAttribute('cx', '60');
circle.setAttribute('cy', '60');
circle.setAttribute('r', '40');
circle.setAttribute('tabindex', '0'); // ohne tabindex nicht fokussierbar

svg.append(circle);
document.body.append(svg);

circle.focus();
console.log(document.activeElement === circle);

true

Balkendiagramm mit Pfeiltasten bedienen

// Erwartet: <svg id="chart"><rect class="bar" tabindex="-1" …/> …</svg>
const bars = [...document.querySelectorAll('#chart .bar')];
let index = 0;
bars[index].setAttribute('tabindex', '0');

document.querySelector('#chart').addEventListener('keydown', (event) => {
  if (!['ArrowRight', 'ArrowLeft'].includes(event.key)) return;
  event.preventDefault();

  bars[index].setAttribute('tabindex', '-1');
  index = event.key === 'ArrowRight'
    ? (index + 1) % bars.length
    : (index - 1 + bars.length) % bars.length;
  bars[index].setAttribute('tabindex', '0');
  bars[index].focus({ preventScroll: true });
  console.log(`Balken ${index + 1} fokussiert`);
});

Balken 2 fokussiert (nach Pfeil rechts)

Nicht fokussierbares Element: Aufruf ohne Wirkung

const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.append(rect);
document.body.append(svg);

rect.focus(); // kein tabindex – nichts passiert, kein Fehler
console.log(document.activeElement === rect);

rect.setAttribute('tabindex', '-1');
rect.focus({ focusVisible: true });
console.log(document.activeElement === rect);

false true

// Wichtig · Fallstricke

Ohne tabindex passiert nichts: Die meisten SVG-Elemente sind nicht fokussierbar. Der Aufruf scheitert dann stillschweigend. Kontrollieren kann man das über document.activeElement.
Das Element muss im Dokument eingehängt und darstellbar sein. Bei display: none, visibility: hidden oder innerhalb von <defs> wird es nicht fokussiert.
Barrierefreiheit: Fokussierbare SVG-Elemente brauchen eine passende role und eine zugängliche Bezeichnung, etwa über aria-label oder <title>. Außerdem sollte ein sichtbarer Fokusstil definiert sein (:focus-visible { outline: … }), denn Browser zeichnen Fokusringe bei SVG uneinheitlich.
Browser-Kompatibilität: focus() und tabindex auf SVG funktionieren in allen modernen Browsern. Der alte Internet Explorer kannte die Methode auf SVG nicht, dort half nur das nicht standardisierte focusable-Attribut. preventScroll wird breit unterstützt, focusVisible erst in neueren Versionen (Firefox 104+, Chrome/Edge 125+, Safari 18.4+). Ältere Browser ignorieren die Option einfach.
Ein Aufruf in einem Dokument oder Fenster, das gerade nicht aktiv ist, kann das Fenster nicht in den Vordergrund holen.

Siehe auch

SVGElement.blur() HTMLElement.focus() SVGElement.tabIndex Document.activeElement SVGElement InstallEvent.addRoutes()