diff --git a/files/en-us/web/api/svgangle/converttospecifiedunits/index.md b/files/en-us/web/api/svgangle/converttospecifiedunits/index.md new file mode 100644 index 000000000000000..808826327c3904c --- /dev/null +++ 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 index 9c98232cad15e70..590445b955034ae 100644 --- 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 new file mode 100644 index 000000000000000..2037c94c69673ea --- /dev/null +++ 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 new file mode 100644 index 000000000000000..d14ba2fe4e21600 --- /dev/null +++ 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 new file mode 100644 index 000000000000000..399d85feef03ac5 --- /dev/null +++ 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 [``](/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 new file mode 100644 index 000000000000000..fb68e0405e95836 --- /dev/null +++ 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 + +- [``](/en-US/docs/Web/SVG/Content_type#angle) +- {{domxref("SVGAnimatedAngle")}} diff --git a/files/en-us/web/api/svgangle/valueinspecifiedunits/index.md b/files/en-us/web/api/svgangle/valueinspecifiedunits/index.md new file mode 100644 index 000000000000000..8808a173fc66cdc --- /dev/null +++ b/files/en-us/web/api/svgangle/valueinspecifiedunits/index.md @@ -0,0 +1,45 @@ +--- +title: "SVGAngle: valueInSpecifiedUnits property" +short-title: valueInSpecifiedUnits +slug: Web/API/SVGAngle/valueInSpecifiedUnits +page-type: web-api-instance-property +browser-compat: api.SVGAngle.valueInSpecifiedUnits +--- + +{{APIRef("SVG")}} + +The `valueInSpecifiedUnits` property of the {{domxref("SVGAngle")}} interface represents the value of this angle as a number, in the units expressed by the angle's {{domxref("SVGAngle.unitType", "unitType")}}. + +Setting this attribute will cause {{domxref("SVGAngle.value", "value")}} and {{domxref("SVGAngle.valueAsString", "valueAsString")}} to be updated automatically to reflect this setting. + +## Value + +A number; the numeric factor of the angle. + +## Examples + +```js +// Get an SVGAngle object +const svg = document.querySelector("svg"); +const angle = svg.createSVGAngle(); + +// Set the value of the angle in degrees +angle.value = 45; +console.log(angle.valueInSpecifiedUnits); // Output: 45 + +// Update the numeric factor of the angle +angle.valueInSpecifiedUnits = 90; +console.log(angle.valueInSpecifiedUnits); // Output: 90 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedAngle")}}