SVGMaskElement：maskContentUnits 属性

maskContentUnits 是 SVGMaskElement 接口的只读属性，它反映了 maskContentUnits 属性。它指示对 <mask> 元素的内容使用哪个坐标系。

注意：尽管此属性是只读的，但它仅仅是两个可以修改的值的容器，baseVal 和 animVal。

值

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

0 (SVG_UNIT_TYPE_UNKNOWN)

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

1 (SVG_UNIT_TYPE_USERSPACEONUSE)

对应于 maskContentUnits 属性的 userSpaceOnUse 值，这意味着元素内部的所有坐标都引用在创建蒙版时定义的用户坐标系。这是默认值。

2 (SVG_UNIT_TYPE_OBJECTBOUNDINGBOX)

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

示例

html
<div>
  <svg
    viewBox="0 0 100 100"
    width="150"
    height="150"
    xmlns="http://www.w3.org/2000/svg">
    <mask id="mask1" maskContentUnits="userSpaceOnUse">
      <rect fill="black" x="0" y="0" width="100%" height="100%" />
      <circle fill="white" cx="50" cy="50" r="35" />
    </mask>

    <mask id="mask2" maskContentUnits="objectBoundingBox">
      <rect fill="black" x="0" y="0" width="100%" height="100%" />
      <circle fill="white" cx=".5" cy=".5" r=".35" />
      <animate
        attributeName="maskContentUnits"
        values="objectBoundingBox;userSpaceOnUse"
        dur="1s"
        repeatCount="indefinite" />
    </mask>

    <!-- Some reference rect to materialized the mask -->
    <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 masked with useSpaceOnUse units -->
    <use mask="url(#mask1)" href="#r1" fill="blue" />
    <use mask="url(#mask1)" href="#r2" fill="yellow" />
    <use mask="url(#mask1)" href="#r3" fill="green" />

    <!-- The last rect is masked with objectBoundingBox units -->
    <use mask="url(#mask2)" href="#r4" fill="lightblue" />
  </svg>
</div>
<pre id="log"></pre>
js
const unitType = ["unknown", "userSpaceOnUse", "objectBoundingBox"];

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

function displayLog() {
  const baseValue = unitType[mask.maskContentUnits.baseVal];
  const animValue = unitType[mask.maskContentUnits.animVal];
  log.textContent = `The top-right 'maskContentUnits.baseVal' coord system : ${baseValue}\n`;
  log.textContent += `The top-right 'maskContentUnits.animVal' coord system : ${animValue}`;
  requestAnimationFrame(displayLog);
}
displayLog();

规范

规范
CSS 蒙版模块级别 1
# dom-svgmaskelement-maskcontentunits

浏览器兼容性

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

另请参阅