SVGElement: blur() 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.blur() method removes keyboard focus from the current SVG element.

Syntax

blur()

Parameters

None.

Return value

None (undefined).

Examples

Remove focus from 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>
  <button id="blurButton">Blur the circle</button>
</svg>

JavaScript

const circle = document.getElementById("myCircle");
const focusButton = document.getElementById("focusButton");
const blurButton = document.getElementById("blurButton");

// Focus the circle when the "Focus" button is clicked
focusButton.addEventListener("click", () => {
  circle.focus();
});

// Blur the circle when the "Blur" button is clicked
blurButton.addEventListener("click", () => {
  circle.blur();
});

Specifications

Specification
HTML Standard # dom-blur-dev

Browser compatibility

BCD tables only load in the browser