SVGClipPathElement: clipPathUnits 属性
SVGClipPathElement 接口中只读的 clipPathUnits 属性反映了 <clipPath> 元素的 clipPathUnits 属性，该属性定义了用于元素内容的坐标系统。
值
一个 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 蒙版模块 Level 1 # dom-svgclippathelement-clippathunits |
浏览器兼容性
加载中…