SVGAnimatedEnumeration: animVal property
The animVal
property of the SVGAnimatedEnumeration
interface contains the current value of an SVG enumeration. If there is no animation, it is the same value as the baseVal
.
Value
An integer containing the current value of the enumeration
Examples
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)" xlink:href="#r1" fill="lightblue" />
</svg>
</div>
<pre id="log"></pre>
js
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();
Specifications
Specification |
---|
Scalable Vector Graphics (SVG) 2 # __svg__SVGAnimatedEnumeration__animVal |
Browser compatibility
BCD tables only load in the browser