SVGAnimatedEnumeration: animVal-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Die animVal-Eigenschaft des SVGAnimatedEnumeration-Interfaces enthält den aktuellen Wert einer SVG-Enumeration. Wenn keine Animation vorliegt, ist es derselbe Wert wie der baseVal.

Wert

Ein Ganzzahlwert, der den aktuellen Wert der Enumeration enthält

Beispiele

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();

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # __svg__SVGAnimatedEnumeration__animVal

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

SVGAnimatedEnumeration.baseVal