SVGMaskElement：x 属性

x 属性是 SVGMaskElement 接口的只读属性，返回一个 SVGAnimatedLength 对象，该对象包含 <mask> 元素的 x 属性的值。它表示遮罩区域 左上角 的 x 轴坐标。

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

值

此对象中的 SVGAnimatedLength 对象位于由 SVGMaskElement.maskUnits 定义的坐标系中。此对象的 baseVal 属性返回一个 SVGLength，其值返回初始 x 值。

示例

html,
body,
svg {
  height: 100%;
}

html

<div>
  <svg viewBox="-10 -10 120 120" width="100" height="100">
    <mask id="mask" x="0" maskUnits="userSpaceOnUse">
      <!-- Everything under a white pixel will be visible -->
      <rect x="0" y="0" width="100" height="100" fill="white" />

      <!-- Everything under a black pixel will be invisible -->
      <path
        d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z"
        fill="black" />
      <animate
        attributeName="x"
        values="0;80;0"
        dur="5s"
        repeatCount="indefinite" />
    </mask>

    <polygon points="-10,110 110,110 110,-10" fill="orange" />

    <!-- with this mask applied, we "punch" a heart shape hole into the circle -->
    <circle cx="50" cy="50" r="50" mask="url(#mask)" />
  </svg>
</div>
<pre id="log"></pre>

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

function displayLog() {
  const animValue = mask.x.animVal.value;
  const baseValue = mask.x.baseVal.value;
  log.textContent = `The 'x.animVal' is ${animValue}.\n`;
  log.textContent += `The 'x.baseVal' is ${baseValue}.`;
  requestAnimationFrame(displayLog);
}
displayLog();

规范

规范
CSS 遮罩模块级别 1 # dom-svgmaskelement-x

浏览器兼容性

BCD 表格仅在浏览器中加载