SVGClipPathElement: clipPathUnits 属性

clipPathUnits 是 SVGClipPathElement 接口的只读属性，它反映了 clipPathUnits 属性，该属性定义了 <clipPath> 元素内容使用的坐标系。

注意：虽然此属性是只读的，但它只是包含您可以修改的两个值的容器，即 baseVal 和 animVal。

值

表示坐标系的 SVGAnimatedEnumeration。可能的值在 SVGUnitTypes 接口中定义。

0 (SVG_UNIT_TYPE_UNKNOWN)

类型不是预定义类型之一。

1 (SVG_UNIT_TYPE_USERSPACEONUSE)

对应于 clipPathUnits 属性的 userSpaceOnUse 值，这意味着元素内部的所有坐标都引用创建剪切路径时定义的用户坐标系。这是默认值。

2 (SVG_UNIT_TYPE_OBJECTBOUNDINGBOX)

对应于属性的 objectBoundingBox 值，这意味着元素内部的所有坐标都是相对于应用剪切路径的元素的边界框。这意味着坐标系的原点是对象边界框的左上角，并且对象边界框的宽度和高度被认为具有 1 个单位值的长度。

示例

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}`;

规范

规范
CSS 遮罩模块级别 1
# dom-svgclippathelement-clippathunits

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅