mdn · yashrajbharti · Nov 28, 2024
@@ -0,0 +1,98 @@
+---
+title: "SVGAngle: convertToSpecifiedUnits() method"
+short-title: convertToSpecifiedUnits()
+slug: Web/API/SVGAngle/convertToSpecifiedUnits
+page-type: web-api-instance-method
+browser-compat: api.SVGAngle.convertToSpecifiedUnits
+---
+
+{{APIRef("SVG")}}
+
+The `convertToSpecifiedUnits()` method of the {{domxref("SVGAngle")}} interface allows you to convert the angle's value to a specified unit type. This method is used when you want to convert an angle from its current unit type to another specified unit.
+
+## Description
+
+The method converts the `SVGAngle`'s value to the desired unit type, which can be one of several predefined constants like degrees, radians, or gradians. The `SVGAngle`'s current value is converted into the specified unit type.
+
+## Syntax
+
+```js
+svgAngle.convertToSpecifiedUnits(unitType);
+```
+
+## Parameters
+
+- **{{domxref("SVGAngle.unitType")}}**
+  A constant representing the unit type to which the angle's value should be converted. This can be one of the following:
+  - `SVG_ANGLETYPE_DEG` — Degrees
+  - `SVG_ANGLETYPE_RAD` — Radians
+  - `SVG_ANGLETYPE_GRAD` — Gradians
+  - `SVG_ANGLETYPE_UNSPECIFIED` — Unitless (a number only)
+
+## Behavior
+
+1. **On Calling `convertToSpecifiedUnits()`**:
+
+   - If the `SVGAngle` object is read-only, a {{domxref("DOMException")}} with code `NO_MODIFICATION_ALLOWED_ERR` is thrown.
+   - If `unitType` is `SVG_ANGLETYPE_UNKNOWN` or any unsupported unit type, a {{domxref("DOMException")}} with code `NOT_SUPPORTED_ERR` is thrown.
+   - The method converts the current value of the `SVGAngle` to the specified `unitType` and updates its value accordingly.
+
+2. **Reserialization**
+   If the `SVGAngle` reflects the base value of a reflected attribute (or an element of the base value), the reflected attribute is re-serialized to reflect the updated angle.
+
+## Exceptions
+
+- **`NO_MODIFICATION_ALLOWED_ERR`**
+  Thrown if the `SVGAngle` object is read-only and modification is attempted.
+
+- **`NOT_SUPPORTED_ERR`**
+  Thrown if the `unitType` is not a valid value or is `SVG_ANGLETYPE_UNKNOWN`.
+
+## Examples
+
+Converting an angle to degrees
+
+```js
+// Create an SVGAngle object
+const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+const angle = svg.createSVGAngle();
+
+// Set the angle's value in radians (Math.PI / 2)
+angle.newValueSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_RAD, Math.PI / 2);
+
+// Convert the angle's value to degrees
+angle.convertToSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_DEG);
+
+// Retrieve the angle's value in degrees
+console.log(angle.value); // Outputs: 90
+console.log(angle.unitType); // Outputs: 2 (SVG_ANGLETYPE_DEG)
+```
+
+Attempting to convert to an unsupported unit type
+
+```js
+try {
+  // Create an SVGAngle object
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  const angle = svg.createSVGAngle();
+
+  // Attempt to convert to an invalid unit type
+  angle.convertToSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_UNKNOWN);
+} catch (e) {
+  console.error(e.name); // Outputs: NotSupportedError
+}
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAngle.unitType")}}
+- {{domxref("SVGAngle.valueInSpecifiedUnits")}}
+- {{domxref("SVGAngle.newValueSpecifiedUnits")}}
@@ -33,21 +33,23 @@ Every `SVGAngle` object operates in one of two modes:
 
 ## Instance properties
 
-- `unitType`
+- {{domxref("SVGAngle.unitType")}}
+
   - : The type of the value as specified by one of the `SVG_ANGLETYPE_*` constants defined on this interface.
-- `value`
+
+- {{domxref("SVGAngle.value")}}
 
   - : The value as a floating point value, in user units. Setting this attribute will cause `valueInSpecifiedUnits` and `valueAsString` to be updated automatically to reflect this setting.
 
     **Exceptions on setting:** A {{domxref("DOMException")}} with code `NO_MODIFICATION_ALLOWED_ERR` is raised when the length corresponds to a read-only attribute, or when the object itself is read-only.
 
-- `valueInSpecifiedUnits`
+- {{domxref("SVGAngle.valueInSpecifiedUnits")}}
 
   - : The value as a floating point value, in the units expressed by `unitType`. Setting this attribute will cause `value` and `valueAsString` to be updated automatically to reflect this setting.
 
     **Exceptions on setting:** A {{domxref("DOMException")}} with code `NO_MODIFICATION_ALLOWED_ERR` is raised when the length corresponds to a read-only attribute, or when the object itself is read-only.
 
-- `valueAsString`
+- {{domxref("SVGAngle.valueAsString")}}
 
   - : The value as a string value, in the units expressed by `unitType`. Setting this attribute will cause `value`, `valueInSpecifiedUnits`, and `unitType` to be updated automatically to reflect this setting.
 
@@ -59,7 +61,7 @@ Every `SVGAngle` object operates in one of two modes:
 
 ## Instance methods
 
-- `newValueSpecifiedUnits`
+- {{domxref("SVGAngle.newValueSpecifiedUnits")}}
 
   - : Reset the value as a number with an associated unitType, thereby replacing the values for all of the attributes on the object.
 
@@ -68,7 +70,8 @@ Every `SVGAngle` object operates in one of two modes:
     - A {{domxref("DOMException")}} with code `NOT_SUPPORTED_ERR` is raised if `unitType` is `SVG_ANGLETYPE_UNKNOWN` or not a valid unit type constant (one of the other `SVG_ANGLETYPE_*` constants defined on this interface).
     - A {{domxref("DOMException")}} with code `NO_MODIFICATION_ALLOWED_ERR` is raised when the length corresponds to a read only attribute or when the object itself is read only.
 
-- `convertToSpecifiedUnits`
+- {{domxref("SVGAngle.convertToSpecifiedUnits")}}
+
   - : Preserve the same underlying stored value, but reset the stored unit identifier to the given `unitType`. Object attributes `unitType`, `valueInSpecifiedUnits`, and `valueAsString` might be modified as a result of this method.
 
 ## Specifications

@@ -0,0 +1,130 @@
+---
+title: "SVGAngle: newValueSpecifiedUnits() method"
+short-title: newValueSpecifiedUnits()
+slug: Web/API/SVGAngle/newValueSpecifiedUnits
+page-type: web-api-instance-method
+browser-compat: api.SVGAngle.newValueSpecifiedUnits
+---
+
+{{APIRef("SVG")}}
+
+The `newValueSpecifiedUnits()` method of the {{domxref("SVGAngle")}} interface allows you to set the angle's value in a specified unit type. This method is used when you want to provide a unit alongside the numeric value of the angle.
+
+## Description
+
+The method sets the `SVGAngle`'s value by specifying both the unit type and the numeric value. The unit type can be one of several predefined constants such as degrees, radians, or gradians. If the {{domxref("SVGAngle.unitType")}} is unknown or unsupported, an error is thrown.
+
+## Syntax
+
+```js
+svgAngle.newValueSpecifiedUnits(unitType, valueInSpecifiedUnits);
+```
+
+## Parameters
+
+- **{{domxref("SVGAngle.unitType")}}**
+  A constant representing the unit type for the angle. This can be one of the following:
+
+  - `SVG_ANGLETYPE_DEG` — Degrees
+  - `SVG_ANGLETYPE_RAD` — Radians
+  - `SVG_ANGLETYPE_GRAD` — Gradians
+  - `SVG_ANGLETYPE_UNSPECIFIED` — Unitless (a number only)
+
+- **{{domxref("SVGAngle.valueInSpecifiedUnits")}}**
+  The numeric factor for the angle value, expressed in the specified unit type (e.g., a number for degrees, radians, or gradians).
+
+## Behavior
+
+1. **On Calling `newValueSpecifiedUnits()`**:
+
+   - If the `SVGAngle` object is read-only, a {{domxref("DOMException")}} with code `NO_MODIFICATION_ALLOWED_ERR` is thrown.
+   - If `unitType` is `SVG_ANGLETYPE_UNKNOWN` or any unsupported unit type, a {{domxref("DOMException")}} with code `NOT_SUPPORTED_ERR` is thrown.
+   - If `unitType` is `SVG_ANGLETYPE_UNSPECIFIED`, the angle is set as a unitless number (the value is directly set as `valueInSpecifiedUnits`).
+   - Otherwise, the angle is updated with the numeric factor `valueInSpecifiedUnits` and the unit is set according to the `unitType`.
+
+2. **Reserialization**
+   If the `SVGAngle` reflects the base value of a reflected attribute (or an element of the base value), the reflected attribute is re-serialized to reflect the updated angle.
+
+## Exceptions
+
+- **`NO_MODIFICATION_ALLOWED_ERR`**
+  Thrown if the `SVGAngle` object is read-only and modification is attempted.
+
+- **`NOT_SUPPORTED_ERR`**
+  Thrown if the `unitType` is not a valid value or is `SVG_ANGLETYPE_UNKNOWN`.
+
+## Examples
+
+Setting an angle in degrees
+
+```js
+// Create an SVGAngle object
+const svg = document.createElementNS("http://www.w3.org/2000/svg", "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); // Outputs: 45
+console.log(angle.unitType); // Outputs: 2 (SVG_ANGLETYPE_DEG)
+```
+
+Setting an angle in radians
+
+```js
+// Create an SVGAngle object
+const svg = document.createElementNS("http://www.w3.org/2000/svg", "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); // Outputs: 90
+console.log(angle.unitType); // Outputs: 3 (SVG_ANGLETYPE_RAD)
+```
+
+Setting an angle in gradians
+
+```js
+// Create an SVGAngle object
+const svg = document.createElementNS("http://www.w3.org/2000/svg", "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); // Outputs: 90
+console.log(angle.unitType); // Outputs: 4 (SVG_ANGLETYPE_GRAD)
+```
+
+Attempting to set an unsupported unit type
+
+```js
+try {
+  // Create an SVGAngle object
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  const angle = svg.createSVGAngle();
+
+  // Attempt to set an invalid unit type
+  angle.newValueSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_UNKNOWN, 45);
+} catch (e) {
+  console.error(e.name); // Outputs: NotSupportedError
+}
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAngle.unitType")}}
+- {{domxref("SVGAngle.valueInSpecifiedUnits")}}
+- {{domxref("SVGAngle.convertToSpecifiedUnits")}}
@@ -0,0 +1,59 @@
+---
+title: "SVGAngle: unitType property"
+short-title: unitType
+slug: Web/API/SVGAngle/unitType
+page-type: web-api-instance-property
+browser-compat: api.SVGAngle.unitType
+---
+
+{{APIRef("SVG")}}
+
+The **`unitType`** property of the {{domxref("SVGAngle")}} interface that represents the type of value the `SVGAngle` holds. This is determined by one of the predefined constants of the `SVGAngle` interface.
+
+## Value
+
+An **unsigned short** indicating the angle type, represented by one of the following constants:
+
+- `SVGAngle.SVG_ANGLETYPE_UNKNOWN` (0): The angle type is unknown or not specified.
+- `SVGAngle.SVG_ANGLETYPE_UNSPECIFIED` (1): A unitless number, interpreted as degrees.
+- `SVGAngle.SVG_ANGLETYPE_DEG` (2): The angle is specified in degrees (`deg`).
+- `SVGAngle.SVG_ANGLETYPE_RAD` (3): The angle is specified in radians (`rad`).
+- `SVGAngle.SVG_ANGLETYPE_GRAD` (4): The angle is specified in gradians (`grad`).
+
+## Description
+
+The `unitType` IDL attribute indicates the type of value that the `SVGAngle` holds. When the property is accessed, the following steps are executed:
+
+1. If the `SVGAngle`'s value is a unitless `<number>` or an `<angle>` with a `deg`, `rad`, or `grad` unit, the corresponding constant value from the angle unit type table is returned.
+2. If the `SVGAngle`'s value is of any other type (e.g., an `<angle>` with a `turn` unit), `SVG_ANGLETYPE_UNKNOWN` is returned.
+
+## Examples
+
+Here's an example of how to access the `unitType` property:
+
+```js
+// Assume `angle` is an instance of SVGAngle
+const angle = document
+  .createElementNS("http://www.w3.org/2000/svg", "svg")
+  .createSVGAngle();
+
+// Set the angle value
+angle.newValueSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_DEG, 45);
+
+// Check the unit type
+console.log(angle.unitType); // Outputs: 2 (SVG_ANGLETYPE_DEG)
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAngle.value")}}
+- {{domxref("SVGAngle.valueInSpecifiedUnits")}}
+- {{domxref("SVGAngle.valueAsString")}}