Use pointer-events: none to Click Through SVG Overlays

When using SVG elements as visual overlays, decorative borders, or floating UI accents, they often block user interactions with underlying HTML elements. Applying pointer-events: none to the overlaying SVG disables its hit-testing, allowing mouse clicks, touches, and scroll events to pass directly through the graphic to the interactive elements underneath.

The Underlying Issue with SVG Overlays

By default, an SVG element captures all pointer events within its bounding box or rendered geometry. If an SVG layer is positioned over a webpage using absolute or fixed positioning (for instance, a full-screen particle effect or decorative background overlay), users will be unable to click buttons, select text, or interact with forms located beneath the SVG.

Applying pointer-events: none

Setting pointer-events: none makes an element invisible to pointer interactions. Clicks, hovers, drags, and touches simply ignore the targeted element and trigger whatever is rendered below it in the stacking context.

You can apply this behavior in two ways:

1. Using CSS

The most common approach is defining the property via CSS on the SVG element or its container:

.overlay-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

2. Using the SVG Attribute

You can also set it directly on the SVG element using the presentation attribute in HTML:

<svg pointer-events="none" class="overlay-svg">
  <!-- SVG content -->
</svg>

Re-enabling Events on Specific Child Elements

In scenarios where you want the general SVG canvas to be click-through, but specific paths, icons, or shapes inside the SVG to remain clickable, you can combine none and auto.

  1. Set pointer-events: none on the parent <svg> element.
  2. Set pointer-events: auto (or all, visiblePainted) on the specific child elements that need interaction.
/* Make entire SVG transparent to clicks */
.overlay-svg {
  pointer-events: none;
}

/* Re-enable clicks for specific interactive paths/buttons */
.overlay-svg .interactive-path {
  pointer-events: auto;
  cursor: pointer;
}
<svg class="overlay-svg" viewBox="0 0 500 500">
  <!-- Clicks pass through this background shape -->
  <path d="..." fill="rgba(0,0,0,0.1)" />

  <!-- This button receives clicks normally -->
  <circle class="interactive-path" cx="250" cy="250" r="40" fill="red" />
</svg>

Key Considerations