To make a referenced SVG clipping path scale with the element it clips, set clipPathUnits="objectBoundingBox" on its <clipPath>. Its coordinates are then relative to the target’s bounding box: (0, 0) is the top-left and (1, 1) the bottom-right. Use userSpaceOnUse when the clip should use SVG user coordinates; that is the default.
Choose the coordinate system that matches the design
The key difference is what the clipping path’s numbers are measured against. With objectBoundingBox, the clip follows the dimensions of the clipped element. With userSpaceOnUse, the clip is defined in SVG user coordinates and does not automatically become proportional to each target’s box.
| Choice | Coordinate basis | Best fit | Consideration |
|---|---|---|---|
objectBoundingBox |
Normalized target bounding box; 0–1 spans the box | Proportional clip geometry reused across differently sized elements | Needs a meaningful target width and height; geometry scales with the box. |
userSpaceOnUse |
SVG user coordinate system | Geometry designed in a known SVG coordinate space | This is the default; align the path to the applicable coordinate system. |
“Normalized” does not mean every coordinate must fall between 0 and 1. SVG 2 describes a bounding-box transform that permits values below zero or above one, so a clip can intentionally extend beyond the target box. The SVG 2 specification explains the coordinate mapping.
Set up a reusable, target-relative clip
This example defines a slanted edge using normalized coordinates. The definition is referenced from CSS with a URL:
<svg aria-hidden="true" class="clip-defs" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="angled" clipPathUnits="objectBoundingBox">
<path d="M 0 0, 1 0, 0.85 1, 0 1 Z" />
</clipPath>
</defs>
</svg>
<div class="card">Content</div>.card {
clip-path: url(#angled);
}Because the clip uses objectBoundingBox, its path runs across the target’s normalized box. For geometry designed in fixed SVG user coordinates, omit clipPathUnits or specify clipPathUnits="userSpaceOnUse", then align the path with the applicable coordinate system. The snippet illustrates syntax; behavior should be checked in the browsers and reference context you support.
Keep CSS geometry boxes separate from SVG clip units
CSS basic shapes can include a geometry-box value that determines their reference box. These options apply to CSS basic-shape syntax; they are not alternate spellings of an SVG <clipPath> element’s clipPathUnits.
| CSS geometry box | Reference | Use when |
|---|---|---|
fill-box |
Object bounding box | The CSS shape should follow the fill box. |
stroke-box |
Box including stroke extent | The shape should account for the stroke extent. |
view-box |
Nearest SVG viewport | The shape should use the SVG viewport as its reference. |
See MDN’s explanation of CSS clip-path for the geometry-box syntax.
Check the target geometry and rendering behavior
An object bounding box needs usable width and height. SVG 2 cautions against using objectBoundingBox when the applicable geometry has no width or height—for example, a horizontal or vertical line. Stroke width is ignored when calculating the bounding box, so the clipping effect may be ignored in these cases. SVG 2 documents this limitation.
A clip changes what is rendered, not the clipped element’s inherent geometry: its bounding box remains as if it were not clipped. By default, pointer events are not dispatched in regions removed by the clip. MDN describes these behaviors on its <clipPath> reference page.
Troubleshoot a fixed-size or misaligned clip
- Check the clip units. Confirm whether the referenced
<clipPath>usesobjectBoundingBoxoruserSpaceOnUse. - Match the path data to those units. Use normalized proportions for a target-relative box, or coordinates aligned with the SVG user coordinate system for
userSpaceOnUse. - Check the target’s dimensions. Confirm the applicable geometry has a usable width and height for bounding-box mapping.
- Check the CSS reference box if using a basic shape. Choose the intended
fill-box,stroke-box, orview-box. - Verify the URL reference context and target browsers. Test the exact syntax and arrangement you ship rather than relying on a feature-level availability summary.
Check compatibility for the exact usage
MDN labels the <clipPath> element widely available since July 2015 and CSS clip-path widely available since January 2020. These are feature-level summaries retrieved on 2026-09-28, not guarantees for every URL-reference context, geometry-box value, external-resource arrangement, or browser version. Check current compatibility data and test the exact usage in your target browsers. MDN’s clipPathUnits reference was last modified 2026-03-17; its <clipPath> reference was last modified 2025-11-07.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
