pointer-events

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 pointer-events attribute is a presentation attribute that allows defining whether or when an element may be the target of a mouse event.

Note: As a presentation attribute pointer-events can be used as a CSS property.

You can use this attribute with the following SVG elements:

Example

html
<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
  <!--
  The circle will always intercept the mouse event.
  To change the color of the rect underneath you have
  to click outside the circle
  -->
  <rect x="0" y="0" height="10" width="10" fill="black" />
  <circle cx="5" cy="5" r="4" fill="white" pointer-events="visiblePainted" />

  <!--
  The circle below will never catch a mouse event.
  The rect underneath will change color whether you
  are clicking on the circle or the rect itself
  -->
  <rect x="10" y="0" height="10" width="10" fill="black" />
  <circle cx="15" cy="5" r="4" fill="white" pointer-events="none" />
</svg>
js
window.addEventListener("mouseup", (e) => {
  // Let's pick a random color between #000000 and #FFFFFF
  const color = Math.round(Math.random() * 0xffffff);

  // Let's format the color to fit CSS requirements
  const fill = `#${color.toString(16).padStart(6, "0")}`;

  // Let's apply our color in the
  // element we actually clicked on
  e.target.style.fill = fill;
});

Usage notes

Value bounding-box | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | none
Default value visiblePainted
Animatable Yes

For a detailed explanation of each possible value, have a look at the CSS pointer-events documentation.

Specifications

Specification
Scalable Vector Graphics (SVG) 2
# PointerEventsProperty

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
pointer-events

Legend

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

Full support
Full support