All Or None Or Something In Between: The Values Knowing when an element is painted, visible, or neither is crucial to understanding the impact of each pointer-events value. In other words, if an element has an alpha transparent fill or stroke, it’s painted even if it can’t be seen. rgba(0,0,0,0)) do not affect whether an element is painted or visible.
Note: Color values with alpha transparency (e.g. This happens when elements lack both a stroke and a fill. Perhaps more confusingly, an element can also be visible - that is, have a computed visibility value of visible - without being painted. We just can’t see it (and assistive technology may not detect it). The element is there and occupies theoretical space. This can happen if the visible attribute value or CSS property is hidden or when display is none. However, an SVG element can be painted without being visible. Usually, this means the element is also visible. When we talk about painted elements, we mean that the element has a fill and/or a stroke. Together, “fill” and “stroke” are painting operations that render elements to the screen or page (also known as the canvas). SVG elements can be “filled” but they can also be “stroked”. But initially, which parts of an SVG document are interactive depends on which parts are visible and/or painted. The bounding box is defined as: the tightest fitting rectangle aligned with the axes of that element’s user coordinate system that entirely encloses it and its descendants. When we add a link or an event listener to an SVG document or element, the interactive area will not necessarily be a rectangle. So instead, SVG has what I’ll call a ‘shape model’. As a result, most CSS layout-related properties don’t apply to SVG. You see, when an SVG document is contained by an HTML document, within a CSS layout, the root SVG element adheres to the box layout model. Similarly, adding a skew transformation will turn rectangles into rhomboids. In other words, if you add a hexagonal clip-path path to an a element, only the points within the clipping path will be clickable. Note: Adding a clip-path to an interactive element alters its interactive bounds. When we add a link or an event listener to an element, the interactive area matches the dimensions of the rectangle. That rectangle may be inline, inline-level, atomic inline-level, or block, but it’s still a rectangle with four right angles and four edges. In the box layout model, every element generates a rectangle around its contents. Using CSS with HTML imposes a box layout model on HTML. However, in this article - and for the purposes of the pointer-events property - the phrase "pointer events" also includes mouse and touch events. With it, we can manage which parts of an SVG document or element can receive events from a pointing device such as a mouse, trackpad, or finger.Ī note about terminology: "pointer events" is also the name of a device-agnostic, web platform feature for user input. Not to be confused with DOM ( Document Object Model) pointer events, pointer-events is both a CSS property and an SVG element attribute.