W3cubDocs

/Web APIs

SVGLength: valueAsString property

Baseline Widely available

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

The valueAsString property of the SVGLength interface represents the <length>'s value as a string, in the units expressed by unitType.

Setting this attribute will cause value, valueInSpecifiedUnits, and unitType to be updated automatically to reflect this setting.

Value

A string.

Examples

Setting and retrieving `valueAsString`

// Create an SVGLength object
const svg = document.querySelector("svg");
const length = svg.createSVGLength();

// Set the length as a string
length.valueAsString = "45%";
console.log(length.valueAsString); // Output: "45%"
console.log(length.unitType); // Output: 2 (SVG_LENGTHTYPE_PERCENTAGE)
console.log(length.valueInSpecifiedUnits); // Output: 45

// Change the length value
length.valueAsString = "100px";
console.log(length.valueAsString); // Output: "100px"
console.log(length.unitType); // Output: 5 (SVG_LENGTHTYPE_PX)
console.log(length.value); // Output: 100

Specifications

Specification
Scalable Vector Graphics (SVG) 2> # __svg__SVGLength__valueAsString>

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`valueAsString`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	1.0	4.4	1