This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2018.
The SVGElement.blur() method removes keyboard focus from the current SVG element.
blur()
None.
None (undefined).
<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>
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();
});
| Specification |
|---|
| HTML> # dom-blur-dev> |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | WebView on iOS | |
blur |
1 | 17 | 51 | 15 | 3 | 18 | 51 | 14 | 1 | 1.0 | 4.4 | 1 |
SVGElement.focus makes the element the current keyboard focus.HTMLElement.blur a similar method for HTML elements.
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/SVGElement/blur