SVGAnimatedLength: baseVal property

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.

The baseVal property of the SVGAnimatedLength interface contains the initial value of an SVG enumeration.

Value

A SVGLength containing the initial value of the length.

Examples

html
<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 100 100"
  width="200"
  height="200">
  <circle cx="50" cy="50" r="20px" fill="gold" id="circle"></circle>
</svg>
<pre id="log"></pre>
js
const unit = [
  "unknown",
  "",
  "%",
  "em",
  "ex",
  "px",
  "cm",
  "mm",
  "in",
  "pt",
  "pc",
];
const circle = document.getElementById("circle");
const log = document.getElementById("log");
const baseValue = circle.r.baseVal.value;
const baseUnit = unit[circle.r.baseVal.unitType];

log.textContent = `The 'circle.r.baseVal' is ${baseValue} (in ${baseUnit}).`;

Specifications

Specification
Scalable Vector Graphics (SVG) 2
# __svg__SVGAnimatedLength__baseVal

Browser compatibility

BCD tables only load in the browser

See also