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.
The newValueSpecifiedUnits() method of the SVGAngle interface sets the value to a number with an associated unitType, thereby replacing the values for all of the attributes on the object.
Syntax
newValueSpecifiedUnits(unitType, valueInSpecifiedUnits)
Parameters
unitType-
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 the
unitTypeproperty, with the exception ofSVG_ANGLETYPE_UNKNOWN.SVGAngle.SVG_ANGLETYPE_DEG: convert to degreesSVGAngle.SVG_ANGLETYPE_RAD: convert to radiansSVGAngle.SVG_ANGLETYPE_GRAD: convert to gradiansSVGAngle.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 a DOMException of one of the following types:
NotSupportedErrorDOMException-
Thrown if
unitTypeisSVG_ANGLETYPE_UNKNOWNor not a valid unit type constant. NoModificationAllowedErrorDOMException-
Thrown if
SVGAnglecorresponds to a read-only attribute or when the object itself is read-only.
Examples
Setting an angle in degrees
// Get an SVGAngle object
const 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 degrees
console.log(angle.value); // Output: 45
console.log(angle.unitType); // Output: 2 (SVG_ANGLETYPE_DEG)
Setting an angle in radians
// Get an SVGAngle object
const 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 value
console.log(angle.value); // Output: 90
console.log(angle.unitType); // Output: 3 (SVG_ANGLETYPE_RAD)
Setting an angle in gradians
// Get an SVGAngle object
const 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 gradians
console.log(angle.value); // Output: 90
console.log(angle.unitType); // Output: 4 (SVG_ANGLETYPE_GRAD)
Specifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGAngle__newValueSpecifiedUnits |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
newValueSpecifiedUnits
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support