SVGAnimatedEnumeration: animVal プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

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