SVGElement: focus() method

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

The SVGElement.focus() method sets focus on the specified SVG element, if it can be focused. The focused element is the element that will receive keyboard and similar events by default.

By default the browser will scroll the element into view after focusing it, and it may also provide visible indication of the focused element (typically by displaying a "focus ring" around the element). Parameter options are provided to disable the default scrolling and force visible indication on elements.

Syntax

js
focus()
focus(options)

Parameters

options Optional

An optional object for controlling aspects of the focusing process. This object may contain the following properties:

preventScroll Optional

A boolean value indicating whether or not the browser should scroll the document to bring the newly-focused element into view. A value of false for preventScroll (the default) means that the browser will scroll the element into view after focusing it. If preventScroll is set to true, no scrolling will occur.

Return value

None (undefined).

Examples

Focusing an SVG element

This example uses a button to set the focus on an SVG circle element.

HTML

html
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <circle id="myCircle" cx="100" cy="100" r="50" tabindex="0" fill="blue" />
  <button id="focusButton">Focus the circle</button>
</svg>

JavaScript

js
document.getElementById("focusButton").addEventListener("click", () => {
  const circle = document.getElementById("myCircle");
  circle.focus();
});

Specifications

Specification
HTML
# dom-focus-dev

Notes

  • If you call SVGElement.focus() from a mousedown event handler, you must call event.preventDefault() to keep the focus from leaving the SVGElement

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
focus
options.preventScroll parameter

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also