SVGAngle: newValueSpecifiedUnits() method

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⁩.

ThenewValueSpecifiedUnits() method of theSVGAngle interface sets the value to a number with an associatedunitType, thereby replacing the values for all of the attributes on the object.

A constant representing the unit type to which the angle's value should be converted. This must be one of the constant values defined for theunitType property, with the exception ofSVG_ANGLETYPE_UNKNOWN.

SVGAngle.SVG_ANGLETYPE_DEG: convert to degrees
SVGAngle.SVG_ANGLETYPE_RAD: convert to radians
SVGAngle.SVG_ANGLETYPE_GRAD: convert to gradians
SVGAngle.SVG_ANGLETYPE_UNSPECIFIED: convert to a unitless number, interpreted as degrees

valueInSpecifiedUnits

The numeric factor for the angle value, expressed in the specified unit type.

Return value

None (undefined).

Exceptions

This method may raise aDOMException of one of the following types:

NotSupportedErrorDOMException: Thrown ifunitType isSVG_ANGLETYPE_UNKNOWN or not a valid unit type constant.
NoModificationAllowedErrorDOMException: Thrown ifSVGAngle corresponds to a read-only attribute or when the object itself is read-only.

Examples

Setting an angle in degrees

// Get an SVGAngle objectconst svg = document.querySelector("svg");const angle = svg.createSVGAngle();// Set the angle's value in degrees using newValueSpecifiedUnits()angle.newValueSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_DEG, 45);// Retrieve the angle's value in degreesconsole.log(angle.value); // Output: 45console.log(angle.unitType); // Output: 2 (SVG_ANGLETYPE_DEG)

Setting an angle in radians

// Get an SVGAngle objectconst svg = document.querySelector("svg");const angle = svg.createSVGAngle();// Set the angle's value in radians using newValueSpecifiedUnits()angle.newValueSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_RAD, Math.PI / 2);// Retrieve the angle's valueconsole.log(angle.value); // Output: 90console.log(angle.unitType); // Output: 3 (SVG_ANGLETYPE_RAD)

Setting an angle in gradians

// Get an SVGAngle objectconst svg = document.querySelector("svg");const angle = svg.createSVGAngle();// Set the angle's value in gradians using newValueSpecifiedUnits()angle.newValueSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_GRAD, 100);// Retrieve the angle's value in gradiansconsole.log(angle.value); // Output: 90console.log(angle.unitType); // Output: 4 (SVG_ANGLETYPE_GRAD)