add: SVG Angle MDN Feature Pages (mdn#37013)

* add: SVG Angle MDN Feature Pages * fixes the format * fix: the general format of instance property * Update files/en-us/web/api/svgangle/converttospecifiedunits/index.md Co-authored-by: wbamberg <[email protected]> * major content fixes * fix: content * changed format for values in unitType * Update files/en-us/web/api/svgangle/converttospecifiedunits/index.md Co-authored-by: wbamberg <[email protected]> * Update files/en-us/web/api/svgangle/converttospecifiedunits/index.md Co-authored-by: wbamberg <[email protected]> * Update files/en-us/web/api/svgangle/converttospecifiedunits/index.md Co-authored-by: wbamberg <[email protected]> * Update files/en-us/web/api/svgangle/converttospecifiedunits/index.md Co-authored-by: wbamberg <[email protected]> * fix: syntax * fix: syntax * fix: return type * fix: parameters for new value in specified units * fix: unittype * fix unittype format * fix: value * Update index.md * Update index.md * fix for consistency * Update files/en-us/web/api/svgangle/unittype/index.md Co-authored-by: wbamberg <[email protected]> * Update files/en-us/web/api/svgangle/newvaluespecifiedunits/index.md Co-authored-by: wbamberg <[email protected]> * Update files/en-us/web/api/svgangle/valueinspecifiedunits/index.md Co-authored-by: wbamberg <[email protected]> * Update files/en-us/web/api/svgangle/value/index.md Co-authored-by: wbamberg <[email protected]> * Update files/en-us/web/api/svgangle/valueinspecifiedunits/index.md Co-authored-by: wbamberg <[email protected]> * Update files/en-us/web/api/svgangle/unittype/index.md Co-authored-by: wbamberg <[email protected]> * Update files/en-us/web/api/svgangle/unittype/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/api/svgangle/valueasstring/index.md Co-authored-by: wbamberg <[email protected]> * fix: bold string removed * fix: remove angle comment --------- Co-authored-by: wbamberg <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
47-studio-org · Jan 7, 2025 · a5de116 · a5de116
1 parent af7cc95
commit a5de116
Show file tree

Hide file tree

Showing 7 changed files with 365 additions and 6 deletions.
diff --git a/files/en-us/web/api/svgangle/converttospecifiedunits/index.md b/files/en-us/web/api/svgangle/converttospecifiedunits/index.md
@@ -0,0 +1,71 @@
+---
+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 the specified unit type.
+
+This function will:
+
+- Set the {{domxref("SVGAngle.unitType", "unitType")}} property to the given unit type
+- Update the {{domxref("SVGAngle.valueInSpecifiedUnits", "valueInSpecifiedUnits")}} and {{domxref("SVGAngle.valueAsString", "valueAsString")}} properties so the angle value is represented in the given unit type
+
+## Syntax
+
+```js-nolint
+svgAngle.convertToSpecifiedUnits(unitType)
+```
+
+### 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 {{domxref("SVGAngle.unitType", "unitType")}} property, with the exception of `SVG_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
+
+### Return value
+
+None ({{jsxref('undefined')}}).
+
+## Examples
+
+### Converting an angle to degrees
+
+```js
+// Get an SVGAngle object
+const svg = document.querySelector("svg");
+const angle = svg.createSVGAngle();
+
+// Set the angle's value in radians (Math.PI / 2)
+angle.newValueSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_RAD, Math.PI / 2);
+
+// Retrieve the angle's value as a string
+console.log(angle.valueAsString); // Output: 1.5708rad
+console.log(angle.unitType); // Output: 3 (SVG_ANGLETYPE_RAD)
+
+// Convert the angle's value to degrees
+angle.convertToSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_DEG);
+
+// Retrieve the angle's value as a string
+console.log(angle.valueAsString); // Output: 90deg
+console.log(angle.unitType); // Output: 2 (SVG_ANGLETYPE_DEG)
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedAngle")}}
diff --git a/files/en-us/web/api/svgangle/index.md b/files/en-us/web/api/svgangle/index.md
@@ -33,23 +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.
 
@@ -61,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.
 
@@ -70,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

diff --git a/files/en-us/web/api/svgangle/newvaluespecifiedunits/index.md b/files/en-us/web/api/svgangle/newvaluespecifiedunits/index.md
@@ -0,0 +1,104 @@
+---
+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 sets the value to a number with an associated {{domxref("SVGAngle.unitType", "unitType")}}, thereby replacing the values for all of the attributes on the object.
+
+## Syntax
+
+```js-nolint
+svgAngle.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 {{domxref("SVGAngle.unitType", "unitType")}} property, with the exception of `SVG_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 ({{jsxref('undefined')}}).
+
+### Exceptions
+
+This method may raise a {{domxref("DOMException")}} of one of the following types:
+
+- `NotSupportedError` {{domxref("DOMException")}}
+
+  - : Thrown if `unitType` is `SVG_ANGLETYPE_UNKNOWN` or not a valid unit type constant.
+
+- `NoModificationAllowedError` {{domxref("DOMException")}}
+  - : Thrown if {{domxref("SVGAngle")}} corresponds to a read-only attribute or when the object itself is read-only.
+
+## Examples
+
+### Setting an angle in degrees
+
+```js
+// 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
+
+```js
+// 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
+
+```js
+// 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
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedAngle")}}
diff --git a/files/en-us/web/api/svgangle/unittype/index.md b/files/en-us/web/api/svgangle/unittype/index.md
@@ -0,0 +1,43 @@
+---
+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 is one of the [unit type contants](/en-US/docs/Web/API/SVGAngle#constants) and represents the units in which this angle's value is expressed.
+
+## Value
+
+A number representing the numeric value of the constant.
+
+## Examples
+
+Here's an example of how to access the `unitType` property:
+
+```js
+// Get an SVGAngle object
+const svg = document.querySelector("svg");
+const angle = 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("SVGAnimatedAngle")}}
diff --git a/files/en-us/web/api/svgangle/value/index.md b/files/en-us/web/api/svgangle/value/index.md
@@ -0,0 +1,45 @@
+---
+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 floating point value of the [`<angle>`](/en-US/docs/Web/SVG/Content_type#angle) in degrees.
+
+Setting this attribute will cause {{domxref("SVGAngle.valueInSpecifiedUnits", "valueInSpecifiedUnits")}} and {{domxref("SVGAngle.valueAsString", "valueAsString")}} to be updated automatically to reflect this setting.
+
+## Value
+
+A number; the angle value in degrees.
+
+## Examples
+
+```js
+// Get an SVGAngle object
+const svg = document.querySelector("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
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedAngle")}}
diff --git a/files/en-us/web/api/svgangle/valueasstring/index.md b/files/en-us/web/api/svgangle/valueasstring/index.md
@@ -0,0 +1,50 @@
+---
+title: "SVGAngle: valueAsString property"
+short-title: valueAsString
+slug: Web/API/SVGAngle/valueAsString
+page-type: web-api-instance-property
+browser-compat: api.SVGAngle.valueAsString
+---
+
+{{APIRef("SVG")}}
+
+The `valueAsString` property of the {{domxref("SVGAngle")}} interface represents the angle's value as a string, in the units expressed by {{domxref("SVGAngle.unitType", "unitType")}}.
+
+Setting this attribute will cause {{domxref("SVGAngle.value", "value")}}, {{domxref("SVGAngle.valueInSpecifiedUnits", "valueInSpecifiedUnits")}}, and {{domxref("SVGAngle.unitType", "unitType")}} to be updated automatically to reflect this setting.
+
+## Value
+
+A string; the value of the angle.
+
+## Examples
+
+### Setting and retrieving `valueAsString`
+
+```js
+// Get an SVGAngle object
+const svg = document.querySelector("svg");
+const angle = svg.createSVGAngle();
+
+// Set the value using valueAsString in degrees
+angle.valueAsString = "45deg";
+console.log(angle.valueAsString); // Output: "45deg"
+console.log(angle.value); // Output: 45 (in degrees)
+
+// Set the value using valueAsString in radians
+angle.valueAsString = "1.57rad";
+console.log(angle.valueAsString); // Output: "1.57rad"
+console.log(Math.round(angle.value)); // Output: 90 (since 1.57 radians is approximately 90 degrees)
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [`<angle>`](/en-US/docs/Web/SVG/Content_type#angle)
+- {{domxref("SVGAnimatedAngle")}}