filterUnits

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨January 2020⁩.

The filterUnits attribute defines the coordinate system for the attributes x, y, width and height.

You can use this attribute with the following SVG elements:

Usage notes

Value	`userSpaceOnUse` \| `objectBoundingBox`
Default value	`objectBoundingBox`
Animatable	Yes

userSpaceOnUse: x, y, width and height represent values in the current coordinate system that results from taking the current user coordinate system in place at the time when the <filter> element is referenced (i.e., the user coordinate system for the element referencing the <filter> element via a filter attribute).
objectBoundingBox: In that case, x, y, width and height represent fractions or percentages of the bounding box on the referencing element.

Specification
Filter Effects Module Level 1 # element-attrdef-filter-filterunits

This page was last modified on ⁨Mar 18, 2025⁩ by MDN contributors.