W3cubDocs

/Web APIs

SVGClipPathElement: clipPathUnits property

The read-only clipPathUnits property of the SVGClipPathElement interface reflects the clipPathUnits attribute of a <clipPath> element which defines the coordinate system to use for the content of the element.

Note: Although this property is read-only, it is merely a container for two values you can modify, baseVal and animVal.

Value

An SVGAnimatedEnumeration representing the coordinate system. The possible values are defined in the SVGUnitTypes interface:

0 (SVG_UNIT_TYPE_UNKNOWN)

The type is not one of the predefined type.

1 (SVG_UNIT_TYPE_USERSPACEONUSE)

Corresponds to a value of userSpaceOnUse for the clipPathUnits attribute and means that all coordinates inside the element refer to the user coordinate system as defined when the clipping path was created. It is the default value.

2 (SVG_UNIT_TYPE_OBJECTBOUNDINGBOX)

Corresponds to a value of objectBoundingBox for the attribute and means that all coordinates inside the element are relative to the bounding box of the element the clipping path is applied to. It means that the origin of the coordinate system is the top left corner of the object bounding box and the width and height of the object bounding box are considered to have a length of 1 unit value.

Examples

html

<div>
  <svg viewBox="0 0 100 100" width="200" height="200">
    <clipPath id="clip1" clipPathUnits="userSpaceOnUse">
      <circle cx="50" cy="50" r="35" />
    </clipPath>

    <clipPath id="clip2" clipPathUnits="objectBoundingBox">
      <circle cx=".5" cy=".5" r=".35" />
    </clipPath>

    <!-- Some reference rect to materialized to clip path -->
    <rect id="r1" x="0" y="0" width="45" height="45" />
    <rect id="r2" x="0" y="55" width="45" height="45" />
    <rect id="r3" x="55" y="55" width="45" height="45" />
    <rect id="r4" x="55" y="0" width="45" height="45" />

    <!-- The first 3 rect are clipped with userSpaceOnUse units -->
    <use clip-path="url(#clip1)" href="#r1" fill="red" />
    <use clip-path="url(#clip1)" href="#r2" fill="blue" />
    <use clip-path="url(#clip1)" href="#r3" fill="yellow" />

    <!-- The last rect is clipped with objectBoundingBox units -->
    <use clip-path="url(#clip2)" href="#r4" fill="green" />
  </svg>
</div>
<pre id="log"></pre>

js

const clipPath1 = document.getElementById("clip1");
const clipPath2 = document.getElementById("clip2");

const log = document.getElementById("log");

log.textContent = `The clipPath used three times has a 'clipPathUnits' value of ${clipPath1.clipPathUnits.baseVal}
The clipPath used three times has a 'clipPathUnits' value of ${clipPath2.clipPathUnits.baseVal}`;

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
clipPathUnits 1 12 1.5 9 ≤12.1 3 3 18 4 ≤12.1 1 1.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/SVGClipPathElement/clipPathUnits