How SVG clipPath Restricts Visible Regions

The SVG <clipPath> element restricts the visible rendering area of graphical elements by defining a 1-bit clipping boundary using basic shapes, paths, or text. When applied to an SVG element, the rendering engine calculates the intersection between the target element and the geometry defined inside the <clipPath>. Anything falling inside the clipping path’s perimeter is fully rendered, while any part lying outside is completely discarded and hidden from view.

The Definition and Application Mechanism

A <clipPath> element is typically defined within an SVG <defs> block to prevent it from rendering directly on the canvas. It receives a unique id attribute, which is referenced by the target element using the clip-path presentation attribute or CSS property:

<svg viewBox="0 0 100 100">
  <defs>
    <clipPath id="circleView">
      <circle cx="50" cy="50" r="40" />
    </clipPath>
  </defs>

  <rect x="0" y="0" width="100" height="100" fill="navy" clip-path="url(#circleView)" />
</svg>

When the browser parses this structure, it applies the geometric boundaries of <circle> as a stencil over the <rect>, rendering only the portion of the rectangle that overlaps with the circle.

Binary Visibility vs. Alpha Masking

Unlike an SVG <mask>, which supports 8-bit alpha channels for varying degrees of transparency, a <clipPath> operates on a strict binary (in or out) model:

• Inside the Path: Pixels are 100% visible, retaining their original fill, stroke, and opacity.
• Outside the Path: Pixels have 0% visibility and are completely culled.
• Styling Ignored: The fill, stroke, stroke-width, and opacity attributes defined on elements inside a <clipPath> have no effect on the clipping result; only their raw geometric outlines are evaluated.

Coordinate Systems: clipPathUnits

The positioning and scaling of a clipping path depend on the clipPathUnits attribute, which accepts two values:

• userSpaceOnUse (Default): The clipping geometry shares the current user coordinate system of the referencing SVG canvas. Coordinates represent absolute units.
• objectBoundingBox: Coordinates are normalized between 0.0 and 1.0 relative to the bounding box of the element being clipped. This allows the clipping region to scale automatically if the target shape changes size.

Combining Geometries and Clip Rules

A <clipPath> can contain multiple shapes, such as a combination of <rect>, <path>, and <text> elements. When multiple shapes are included, the total clipping region is the union of all child elements.

For complex, self-intersecting paths inside a <clipPath>, the clip-rule attribute (accepting either nonzero or evenodd) determines how overlapping segments are evaluated to decide whether an inner region is treated as inside or outside the clipping boundary.

Pointer Events and Hit Testing

By default, clipping also restricts the interactive area of an element. Regions cropped out by a <clipPath> do not respond to mouse clicks, hovers, or touch interactions, ensuring that the interactive boundary matches the visible geometry.