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 April 2018.
The SVGElement.blur() method removes keyboard focus from the current SVG element.
Syntax
js
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
js
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> # dom-blur-dev> | 
Browser compatibility
Loading…
See also
- SVGElement.focusmakes the element the current keyboard focus.
- HTMLElement.blura similar method for HTML elements.