add: SVG Angle MDN Feature Pages

files/en-us/web/api/svgangle/converttospecifiedunits/index.md

@@ -0,0 +1,90 @@
+---
+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.
+
+## 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)
+
+### Return Value
+
+A reference to the updated {{domxref("SVGAngle")}} object.
+
+When the `convertToSpecifiedUnits()` method is successfully called, the `SVGAngle` object's `valueInSpecifiedUnits` is converted to match the specified `unitType`, and its value is updated accordingly. If the `SVGAngle` reflects the base value of an attribute, the corresponding attribute is re-serialized to reflect the updated angle.
+
+### Exceptions
+
+This method may raise a {{domxref("DOMException")}} of one of the following types:
+
+- `NO_MODIFICATION_ALLOWED_ERR` {{domxref("DOMException")}}
+  - : Thrown if the `SVGAngle` object is read-only and modification is attempted.
+- `NOT_SUPPORTED_ERR` {{domxref("DOMException")}}
+  - : 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); // Output: 90
+console.log(angle.unitType); // Output: 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); // Output: NotSupportedError
+}
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAngle.unitType")}}
+- {{domxref("SVGAngle.valueInSpecifiedUnits")}}
+- {{domxref("SVGAngle.newValueSpecifiedUnits")}}

files/en-us/web/api/svgangle/index.md

@@ -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

files/en-us/web/api/svgangle/newvaluespecifiedunits/index.md

@@ -0,0 +1,121 @@
+---
+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.
+
+## 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).
+
+### Return Value
+
+A reference to the updated {{domxref("SVGAngle")}} object.
+
+If the `newValueSpecifiedUnits()` method is successfully called, the `SVGAngle` object's `valueInSpecifiedUnits` is updated to the specified numeric factor, and the `unitType` is set to the provided unit type. For `SVG_ANGLETYPE_UNSPECIFIED`, the angle is treated as a unitless number. When the `SVGAngle` reflects a base value of an attribute, the corresponding attribute is re-serialized to reflect the updated angle.
+
+### Exceptions
+
+This method may raise a {{domxref("DOMException")}} of one of the following types:
+
+- `NO_MODIFICATION_ALLOWED_ERR` {{domxref("DOMException")}}
+  - : Thrown if the `SVGAngle` object is read-only and modification is attempted.
+- `NOT_SUPPORTED_ERR` {{domxref("DOMException")}}
+  - : 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); // Output: 45
+console.log(angle.unitType); // Output: 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); // Output: 90
+console.log(angle.unitType); // Output: 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); // Output: 90
+console.log(angle.unitType); // Output: 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); // Output: NotSupportedError
+}
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAngle.unitType")}}
+- {{domxref("SVGAngle.valueInSpecifiedUnits")}}
+- {{domxref("SVGAngle.convertToSpecifiedUnits")}}

files/en-us/web/api/svgangle/unittype/index.md

@@ -0,0 +1,52 @@
+---
+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:
+
+- `SVG_ANGLETYPE_UNKNOWN` (0): The angle type is unknown or not specified.
+- `SVG_ANGLETYPE_UNSPECIFIED` (1): A unitless number, interpreted as degrees.
+- `SVG_ANGLETYPE_DEG` (2): The angle is specified in degrees (`deg`).
+- `SVG_ANGLETYPE_RAD` (3): The angle is specified in radians (`rad`).
+- `SVG_ANGLETYPE_GRAD` (4): The angle is specified in gradians (`grad`).
+
+## 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); // Output: 2 (SVG_ANGLETYPE_DEG)
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAngle.value")}}
+- {{domxref("SVGAngle.valueInSpecifiedUnits")}}
+- {{domxref("SVGAngle.valueAsString")}}

files/en-us/web/api/svgangle/value/index.md

@@ -0,0 +1,65 @@
+---
+title: "SVGAngle: value property"
+short-title: value
+slug: Web/API/SVGAngle/value
+page-type: web-api-instance-property
+browser-compat: api.SVGAngle.value
+---
+
+{{APIRef("SVG")}}
+
+The `value` property of the {{domxref("SVGAngle")}} interface represents the numeric value of the angle in **degrees**. Setting this property automatically updates the {{domxref("SVGAngle.valueInSpecifiedUnits")}} and {{domxref("SVGAngle.valueAsString")}} attributes of the `SVGAngle` object.
+
+A {{domxref("DOMException")}} with code `NO_MODIFICATION_ALLOWED_ERR` is thrown if the `SVGAngle` object is read-only.
+
+## Value
+
+A floating-point number indicating the angle value in degrees.
+
+## Examples
+
+```js
+// Create an SVGAngle object
+const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+const angle = svg.createSVGAngle();
+
+// Set the value
+angle.value = 45;
+console.log(angle.value); // Output: 45
+
+// Reflecting the value
+angle.value = 90;
+console.log(angle.value); // Output: 90
+```
+
+Attempting to modify a read-only `SVGAngle` object will result in an error:
+
+```js
+try {
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+
+  rect.setAttribute("transform", "rotate(45)");
+  svg.appendChild(rect);
+
+  // Access the animVal (read-only)
+  const angle = rect.transform.baseVal.getItem(0).angle;
+  angle.value = 90; // Throws an error
+} catch (e) {
+  console.error(e.name); // Output: NoModificationAllowedError
+}
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAngle.unitType")}}
+- {{domxref("SVGAngle.valueInSpecifiedUnits")}}
+- {{domxref("SVGAngle.valueAsString")}}