Skip to content

Commit a5de116

Browse files
yashrajbhartiwbamberggithub-actions[bot]
authored
add: SVG Angle MDN Feature Pages (#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 <will@bootbonnet.ca> * 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 <will@bootbonnet.ca> * Update files/en-us/web/api/svgangle/converttospecifiedunits/index.md Co-authored-by: wbamberg <will@bootbonnet.ca> * Update files/en-us/web/api/svgangle/converttospecifiedunits/index.md Co-authored-by: wbamberg <will@bootbonnet.ca> * Update files/en-us/web/api/svgangle/converttospecifiedunits/index.md Co-authored-by: wbamberg <will@bootbonnet.ca> * 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 <will@bootbonnet.ca> * Update files/en-us/web/api/svgangle/newvaluespecifiedunits/index.md Co-authored-by: wbamberg <will@bootbonnet.ca> * Update files/en-us/web/api/svgangle/valueinspecifiedunits/index.md Co-authored-by: wbamberg <will@bootbonnet.ca> * Update files/en-us/web/api/svgangle/value/index.md Co-authored-by: wbamberg <will@bootbonnet.ca> * Update files/en-us/web/api/svgangle/valueinspecifiedunits/index.md Co-authored-by: wbamberg <will@bootbonnet.ca> * Update files/en-us/web/api/svgangle/unittype/index.md Co-authored-by: wbamberg <will@bootbonnet.ca> * 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 <will@bootbonnet.ca> * fix: bold string removed * fix: remove angle comment --------- Co-authored-by: wbamberg <will@bootbonnet.ca> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
1 parent af7cc95 commit a5de116

File tree

7 files changed

+365
-6
lines changed

7 files changed

+365
-6
lines changed

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

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
---
2+
title: "SVGAngle: convertToSpecifiedUnits() method"
3+
short-title: convertToSpecifiedUnits()
4+
slug: Web/API/SVGAngle/convertToSpecifiedUnits
5+
page-type: web-api-instance-method
6+
browser-compat: api.SVGAngle.convertToSpecifiedUnits
7+
---
8+
9+
{{APIRef("SVG")}}
10+
11+
The `convertToSpecifiedUnits()` method of the {{domxref("SVGAngle")}} interface allows you to convert the angle's value to the specified unit type.
12+
13+
This function will:
14+
15+
- Set the {{domxref("SVGAngle.unitType", "unitType")}} property to the given unit type
16+
- Update the {{domxref("SVGAngle.valueInSpecifiedUnits", "valueInSpecifiedUnits")}} and {{domxref("SVGAngle.valueAsString", "valueAsString")}} properties so the angle value is represented in the given unit type
17+
18+
## Syntax
19+
20+
```js-nolint
21+
svgAngle.convertToSpecifiedUnits(unitType)
22+
```
23+
24+
### Parameters
25+
26+
- `unitType`
27+
- : 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`.
28+
- `SVGAngle.SVG_ANGLETYPE_DEG`: convert to degrees
29+
- `SVGAngle.SVG_ANGLETYPE_RAD`: convert to radians
30+
- `SVGAngle.SVG_ANGLETYPE_GRAD`: convert to gradians
31+
- `SVGAngle.SVG_ANGLETYPE_UNSPECIFIED`: convert to a unitless number, interpreted as degrees
32+
33+
### Return value
34+
35+
None ({{jsxref('undefined')}}).
36+
37+
## Examples
38+
39+
### Converting an angle to degrees
40+
41+
```js
42+
// Get an SVGAngle object
43+
const svg = document.querySelector("svg");
44+
const angle = svg.createSVGAngle();
45+
46+
// Set the angle's value in radians (Math.PI / 2)
47+
angle.newValueSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_RAD, Math.PI / 2);
48+
49+
// Retrieve the angle's value as a string
50+
console.log(angle.valueAsString); // Output: 1.5708rad
51+
console.log(angle.unitType); // Output: 3 (SVG_ANGLETYPE_RAD)
52+
53+
// Convert the angle's value to degrees
54+
angle.convertToSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_DEG);
55+
56+
// Retrieve the angle's value as a string
57+
console.log(angle.valueAsString); // Output: 90deg
58+
console.log(angle.unitType); // Output: 2 (SVG_ANGLETYPE_DEG)
59+
```
60+
61+
## Specifications
62+
63+
{{Specifications}}
64+
65+
## Browser compatibility
66+
67+
{{Compat}}
68+
69+
## See also
70+
71+
- {{domxref("SVGAnimatedAngle")}}

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

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,23 +33,23 @@ Every `SVGAngle` object operates in one of two modes:
3333

3434
## Instance properties
3535

36-
- `unitType`
36+
- {{domxref("SVGAngle.unitType")}}
3737

3838
- : The type of the value as specified by one of the `SVG_ANGLETYPE_*` constants defined on this interface.
3939

40-
- `value`
40+
- {{domxref("SVGAngle.value")}}
4141

4242
- : 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.
4343

4444
**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.
4545

46-
- `valueInSpecifiedUnits`
46+
- {{domxref("SVGAngle.valueInSpecifiedUnits")}}
4747

4848
- : 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.
4949

5050
**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.
5151

52-
- `valueAsString`
52+
- {{domxref("SVGAngle.valueAsString")}}
5353

5454
- : 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.
5555

@@ -61,7 +61,7 @@ Every `SVGAngle` object operates in one of two modes:
6161

6262
## Instance methods
6363

64-
- `newValueSpecifiedUnits`
64+
- {{domxref("SVGAngle.newValueSpecifiedUnits")}}
6565

6666
- : Reset the value as a number with an associated unitType, thereby replacing the values for all of the attributes on the object.
6767

@@ -70,7 +70,8 @@ Every `SVGAngle` object operates in one of two modes:
7070
- 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).
7171
- 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.
7272

73-
- `convertToSpecifiedUnits`
73+
- {{domxref("SVGAngle.convertToSpecifiedUnits")}}
74+
7475
- : 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.
7576

7677
## Specifications

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

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
---
2+
title: "SVGAngle: newValueSpecifiedUnits() method"
3+
short-title: newValueSpecifiedUnits()
4+
slug: Web/API/SVGAngle/newValueSpecifiedUnits
5+
page-type: web-api-instance-method
6+
browser-compat: api.SVGAngle.newValueSpecifiedUnits
7+
---
8+
9+
{{APIRef("SVG")}}
10+
11+
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.
12+
13+
## Syntax
14+
15+
```js-nolint
16+
svgAngle.newValueSpecifiedUnits(unitType, valueInSpecifiedUnits)
17+
```
18+
19+
### Parameters
20+
21+
- `unitType`
22+
23+
- : 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`.
24+
- `SVGAngle.SVG_ANGLETYPE_DEG`: convert to degrees
25+
- `SVGAngle.SVG_ANGLETYPE_RAD`: convert to radians
26+
- `SVGAngle.SVG_ANGLETYPE_GRAD`: convert to gradians
27+
- `SVGAngle.SVG_ANGLETYPE_UNSPECIFIED`: convert to a unitless number, interpreted as degrees
28+
29+
- `valueInSpecifiedUnits`
30+
- : The numeric factor for the angle value, expressed in the specified unit type.
31+
32+
### Return value
33+
34+
None ({{jsxref('undefined')}}).
35+
36+
### Exceptions
37+
38+
This method may raise a {{domxref("DOMException")}} of one of the following types:
39+
40+
- `NotSupportedError` {{domxref("DOMException")}}
41+
42+
- : Thrown if `unitType` is `SVG_ANGLETYPE_UNKNOWN` or not a valid unit type constant.
43+
44+
- `NoModificationAllowedError` {{domxref("DOMException")}}
45+
- : Thrown if {{domxref("SVGAngle")}} corresponds to a read-only attribute or when the object itself is read-only.
46+
47+
## Examples
48+
49+
### Setting an angle in degrees
50+
51+
```js
52+
// Get an SVGAngle object
53+
const svg = document.querySelector("svg");
54+
const angle = svg.createSVGAngle();
55+
56+
// Set the angle's value in degrees using newValueSpecifiedUnits()
57+
angle.newValueSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_DEG, 45);
58+
59+
// Retrieve the angle's value in degrees
60+
console.log(angle.value); // Output: 45
61+
console.log(angle.unitType); // Output: 2 (SVG_ANGLETYPE_DEG)
62+
```
63+
64+
### Setting an angle in radians
65+
66+
```js
67+
// Get an SVGAngle object
68+
const svg = document.querySelector("svg");
69+
const angle = svg.createSVGAngle();
70+
71+
// Set the angle's value in radians using newValueSpecifiedUnits()
72+
angle.newValueSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_RAD, Math.PI / 2);
73+
74+
// Retrieve the angle's value
75+
console.log(angle.value); // Output: 90
76+
console.log(angle.unitType); // Output: 3 (SVG_ANGLETYPE_RAD)
77+
```
78+
79+
### Setting an angle in gradians
80+
81+
```js
82+
// Get an SVGAngle object
83+
const svg = document.querySelector("svg");
84+
const angle = svg.createSVGAngle();
85+
86+
// Set the angle's value in gradians using newValueSpecifiedUnits()
87+
angle.newValueSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_GRAD, 100);
88+
89+
// Retrieve the angle's value in gradians
90+
console.log(angle.value); // Output: 90
91+
console.log(angle.unitType); // Output: 4 (SVG_ANGLETYPE_GRAD)
92+
```
93+
94+
## Specifications
95+
96+
{{Specifications}}
97+
98+
## Browser compatibility
99+
100+
{{Compat}}
101+
102+
## See also
103+
104+
- {{domxref("SVGAnimatedAngle")}}

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
---
2+
title: "SVGAngle: unitType property"
3+
short-title: unitType
4+
slug: Web/API/SVGAngle/unitType
5+
page-type: web-api-instance-property
6+
browser-compat: api.SVGAngle.unitType
7+
---
8+
9+
{{APIRef("SVG")}}
10+
11+
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.
12+
13+
## Value
14+
15+
A number representing the numeric value of the constant.
16+
17+
## Examples
18+
19+
Here's an example of how to access the `unitType` property:
20+
21+
```js
22+
// Get an SVGAngle object
23+
const svg = document.querySelector("svg");
24+
const angle = svg.createSVGAngle();
25+
26+
// Set the angle value
27+
angle.newValueSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_DEG, 45);
28+
29+
// Check the unit type
30+
console.log(angle.unitType); // Output: 2 (SVG_ANGLETYPE_DEG)
31+
```
32+
33+
## Specifications
34+
35+
{{Specifications}}
36+
37+
## Browser compatibility
38+
39+
{{Compat}}
40+
41+
## See also
42+
43+
- {{domxref("SVGAnimatedAngle")}}

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
---
2+
title: "SVGAngle: value property"
3+
short-title: value
4+
slug: Web/API/SVGAngle/value
5+
page-type: web-api-instance-property
6+
browser-compat: api.SVGAngle.value
7+
---
8+
9+
{{APIRef("SVG")}}
10+
11+
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.
12+
13+
Setting this attribute will cause {{domxref("SVGAngle.valueInSpecifiedUnits", "valueInSpecifiedUnits")}} and {{domxref("SVGAngle.valueAsString", "valueAsString")}} to be updated automatically to reflect this setting.
14+
15+
## Value
16+
17+
A number; the angle value in degrees.
18+
19+
## Examples
20+
21+
```js
22+
// Get an SVGAngle object
23+
const svg = document.querySelector("svg");
24+
const angle = svg.createSVGAngle();
25+
26+
// Set the value
27+
angle.value = 45;
28+
console.log(angle.value); // Output: 45
29+
30+
// Reflecting the value
31+
angle.value = 90;
32+
console.log(angle.value); // Output: 90
33+
```
34+
35+
## Specifications
36+
37+
{{Specifications}}
38+
39+
## Browser compatibility
40+
41+
{{Compat}}
42+
43+
## See also
44+
45+
- {{domxref("SVGAnimatedAngle")}}

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

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
---
2+
title: "SVGAngle: valueAsString property"
3+
short-title: valueAsString
4+
slug: Web/API/SVGAngle/valueAsString
5+
page-type: web-api-instance-property
6+
browser-compat: api.SVGAngle.valueAsString
7+
---
8+
9+
{{APIRef("SVG")}}
10+
11+
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")}}.
12+
13+
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.
14+
15+
## Value
16+
17+
A string; the value of the angle.
18+
19+
## Examples
20+
21+
### Setting and retrieving `valueAsString`
22+
23+
```js
24+
// Get an SVGAngle object
25+
const svg = document.querySelector("svg");
26+
const angle = svg.createSVGAngle();
27+
28+
// Set the value using valueAsString in degrees
29+
angle.valueAsString = "45deg";
30+
console.log(angle.valueAsString); // Output: "45deg"
31+
console.log(angle.value); // Output: 45 (in degrees)
32+
33+
// Set the value using valueAsString in radians
34+
angle.valueAsString = "1.57rad";
35+
console.log(angle.valueAsString); // Output: "1.57rad"
36+
console.log(Math.round(angle.value)); // Output: 90 (since 1.57 radians is approximately 90 degrees)
37+
```
38+
39+
## Specifications
40+
41+
{{Specifications}}
42+
43+
## Browser compatibility
44+
45+
{{Compat}}
46+
47+
## See also
48+
49+
- [`<angle>`](/en-US/docs/Web/SVG/Content_type#angle)
50+
- {{domxref("SVGAnimatedAngle")}}

0 commit comments

Comments
 (0)