SVGAnimatedEnumeration: animVal 属性

animVal 属性是 SVGAnimatedEnumeration 接口的属性，它包含 SVG 枚举的当前值。如果没有动画，则该值与 baseVal 相同。

值

包含枚举当前值的整数

示例

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

html

<div>
  <svg viewBox="0 0 100 100" width="200" height="200">
    <clipPath id="clip1" clipPathUnits="userSpaceOnUse">
      <animate
        attributeName="clipPathUnits"
        values="userSpaceOnUse;objectBoundingBox;userSpaceOnUse"
        dur="2s"
        repeatCount="indefinite" />
      <circle cx="50" cy="50" r="25" />
    </clipPath>

    <rect id="r1" x="0" y="0" width="50" height="100" />

    <use clip-path="url(#clip1)" href="#r1" fill="lightblue" />
  </svg>
</div>
<pre id="log"></pre>

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

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

displayLog();

规范

规范
可缩放矢量图形 (SVG) 2 # __svg__SVGAnimatedEnumeration__animVal

浏览器兼容性

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

另请参阅

SVGAnimatedEnumeration.baseVal