pointer-events
SVG Elements
- A
- B-C
- D
- E
- F
<feBlend>
<feColorMatrix>
<feComponentTransfer>
<feComposite>
<feConvolveMatrix>
<feDiffuseLighting>
<feDisplacementMap>
<feDistantLight>
<feFlood>
<feFuncA>
<feFuncB>
<feFuncG>
<feFuncR>
<feGaussianBlur>
<feImage>
<feMerge>
<feMergeNode>
<feMorphology>
<feOffset>
<fePointLight>
<feSpecularLighting>
<feSpotLight>
<feTile>
<feTurbulence>
<filter>
<font>
<font-face>
<font-face-format>
<font-face-name>
<font-face-src>
<font-face-uri>
<foreignObject>
- G
- H
- I
- J-L
- M
- N-P
- Q-R
- S
- T
- U
- V-Z
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
<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>
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 | 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 |
Browser compatibility
BCD tables only load in the browser