pointer-events

« SVG Attribute reference home

The pointer-events attribute allows authors to control whether or when an element may be the target of a mouse event. This attribute is used to specify under which circumstance (if any) a mouse event should go "through" an element and target whatever is "underneath" that element instead.

As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet; see css pointer-events for further information.

Usage context

Categories Presentation attribute
Value visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | none | inherit
Animatable Yes
Normative document SVG 1.1 (2nd Edition)
visiblePainted
The element can only be the target of a mouse event when the visibility attribute is set to visible and when the mouse cursor is over the interior (i.e., 'fill') of the element and the fill attribute is set to a value other than none, or when the mouse cursor is over the perimeter (i.e., 'stroke') of the element and the stroke attribute is set to a value other than none.
visibleFill
The element can only be the target of a mouse event when the visibility attribute is set to visible and when the mouse cursor is over the interior (i.e., fill) of the element. The value of the fill attribute does not affect event processing.
visibleStroke
The element can only be the target of a mouse event when the visibility attribute is set to visible and when the mouse cursor is over the perimeter (i.e., stroke) of the element. The value of the stroke attribute does not affect event processing.
visible
The element can be the target of a mouse event when the visibility attribute is set to visible and the mouse cursor is over either the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of the fill and stroke attribute do not affect event processing.
painted
The element can only be the target of a mouse event when the mouse cursor is over the interior (i.e., 'fill') of the element and the fill attribute is set to a value other than none, or when the mouse cursor is over the perimeter (i.e., 'stroke') of the element and the stroke attribute is set to a value other than none. The value of the visibility attribute does not affect event processing.
fill
The element can only be the target of a mouse event when the pointer is over the interior (i.e., fill) of the element. The values of the fill and visibility attribute do not affect event processing.
stroke
The element can only be the target of a mouse event when the pointer is over the perimeter (i.e., stroke) of the element. The values of the stroke and visibility attribute do not affect event processing.
all
The element can only be the target of a mouse event when the pointer is over the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of the fill, stroke and visibility attribute do not affect event processing.
none
The element is never the target of mouse events, although mouse events may target its descendent elements if those descendents have pointer-events set to some other value, in which case mouse events will trigger event listeners on this element as appropriate on their way to/from the descendent during the event capture/bubble phases.

Example

Elements

The following elements can use the pointer-events attribute:

See also

Document Tags and Contributors

Contributors to this page: kscarfone, Jeremie, JaredWein, jarkko
Last updated by: kscarfone,