SVG pointer-events: visiblePainted vs all

The pointer-events property in SVG specifies under what circumstances a graphical element can become the target of pointer events, such as mouse clicks, hovers, or touch interactions. The key difference between visiblePainted and all lies in how they handle element visibility and whether the interior (fill) and outline (stroke) of an element must be painted to detect interactions. Understanding these differences allows developers to build precise click targets and invisible interactive zones within SVG graphics.

What is visiblePainted?

visiblePainted is the standard default value for most SVG elements. Under this setting, an element only captures pointer events if it meets strict rendering and visibility criteria:

• Visibility Requirement: The element’s visibility attribute or CSS property must be set to visible. If an element is set to visibility: hidden or visibility: collapse, it will not respond to pointer events.
• Fill Area: The interior of the shape only registers pointer events if the fill property is set to a value other than none (for example, a solid color, gradient, or pattern). If fill="none", clicks pass right through the interior.
• Stroke Area: The perimeter of the shape only registers pointer events if the stroke property is set to a value other than none and the stroke-width is greater than zero.

In short, visiblePainted ensures that users can only interact with pixels that are visibly rendered on the screen.

What is all?

The all value ignores rendering states, visibility settings, and paint values entirely. It makes the entire geometric area of an SVG element interactive.

• Visibility Requirement: The element registers pointer events regardless of its visibility value. Even if an element has visibility: hidden, it still captures clicks and hover states.
• Fill Area: The interior of the shape captures pointer events even if fill="none" is applied.
• Stroke Area: The perimeter of the shape captures pointer events even if stroke="none" is applied.

This makes all particularly useful for creating invisible hit areas, larger tap targets on mobile devices, or hotspot overlays over complex backgrounds.

Key Differences Summary

Practical Example

Consider a transparent circle overlay intended to act as a button:

<circle cx="50" cy="50" r="40" fill="none" stroke="none" pointer-events="visiblePainted" />

With pointer-events="visiblePainted", clicking this circle does nothing because neither the fill nor the stroke is painted.

<circle cx="50" cy="50" r="40" fill="none" stroke="none" pointer-events="all" />

With pointer-events="all", the entire 40px radius area registers clicks, providing a fully functional invisible hit target without requiring an opacity hack (like opacity="0" with a solid fill).