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.

<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" />
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

As a presentation attribute, it can be applied to any element but it is mostly relevant only on the following twenty-three elements: <a>, <circle>, <clipPath>, <defs>, <ellipse>, <foreignObject>, <g>, <image>, <line>, <marker>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textPath>, <tspan>, <use>

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.

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
pointer-eventsChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?


Compatibility unknown  
Compatibility unknown


Specification Status Comment
Scalable Vector Graphics (SVG) 2
The definition of 'pointer-events' in that specification.
Candidate Recommendation
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'pointer-events' in that specification.
Recommendation Initial definition