This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The baseVal property of the SVGAnimatedEnumeration interface contains the initial value of an SVG enumeration.
An integer containing the initial value of the enumeration
Considering this snippet with a <clipPath> element: Its clipPathUnits is associated with an SVGAnimatedEnumeration object.
<svg viewBox="0 0 100 100" width="200" height="200">
<clipPath id="clip1" clipPathUnits="userSpaceOnUse">
<circle cx="50" cy="50" r="35" />
</clipPath>
<!-- Some reference rect to materialized to clip path -->
<rect id="r1" x="0" y="0" width="45" height="45" />
</svg>
This snippet gets the element, and logs the baseVal of the SVGClipPathElement.clipPathUnits property.
const clipPathElt = document.getElementById("clip1");
console.log(clipPathElt.clipPathUnits.baseVal); // Logs 1 that correspond to userSpaceOnUse
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | WebView on iOS | |
baseVal |
1 | 12 | 1.5 | ≤12.1 | 3 | 18 | 4 | ≤12.1 | 1 | 1.0 | 3 | 1 |
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/SVGAnimatedEnumeration/baseVal