Firefox Tomorrow

web api instance method

SVGElement: blur() method

View on MDN ↗

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

<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

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also

  • focus makes the element the current keyboard focus.
  • blur a similar method for HTML elements.