From cb6a3d63ca47ea6efeb1d9f8f60e47375a59d541 Mon Sep 17 00:00:00 2001 From: Yash Raj Bharti <43868318+yashrajbharti@users.noreply.github.com> Date: Tue, 7 Jan 2025 02:49:54 +0530 Subject: [PATCH] New Pages: SVGTextPathElement (#37399) * New Pages: SVGTextPathElement * Update files/en-us/web/api/svgtextpathelement/href/index.md Co-authored-by: Estelle Weyl * Update files/en-us/web/api/svgtextpathelement/href/index.md Co-authored-by: Estelle Weyl * Update files/en-us/web/api/svgtextpathelement/method/index.md Co-authored-by: Estelle Weyl * Update files/en-us/web/api/svgtextpathelement/method/index.md Co-authored-by: Estelle Weyl * Update files/en-us/web/api/svgtextpathelement/method/index.md Co-authored-by: Estelle Weyl * Update files/en-us/web/api/svgtextpathelement/spacing/index.md Co-authored-by: Estelle Weyl * Update files/en-us/web/api/svgtextpathelement/spacing/index.md Co-authored-by: Estelle Weyl * Update files/en-us/web/api/svgtextpathelement/startoffset/index.md Co-authored-by: Estelle Weyl * Update files/en-us/web/api/svgtextpathelement/startoffset/index.md Co-authored-by: Estelle Weyl * add: constant name to spacing --------- Co-authored-by: Estelle Weyl --- .../web/api/svgtextpathelement/href/index.md | 51 ++++++++++++++++++ .../api/svgtextpathelement/method/index.md | 52 +++++++++++++++++++ .../api/svgtextpathelement/spacing/index.md | 52 +++++++++++++++++++ .../svgtextpathelement/startoffset/index.md | 51 ++++++++++++++++++ 4 files changed, 206 insertions(+) create mode 100644 files/en-us/web/api/svgtextpathelement/href/index.md create mode 100644 files/en-us/web/api/svgtextpathelement/method/index.md create mode 100644 files/en-us/web/api/svgtextpathelement/spacing/index.md create mode 100644 files/en-us/web/api/svgtextpathelement/startoffset/index.md diff --git a/files/en-us/web/api/svgtextpathelement/href/index.md b/files/en-us/web/api/svgtextpathelement/href/index.md new file mode 100644 index 000000000000000..aefd56a519d61aa --- /dev/null +++ b/files/en-us/web/api/svgtextpathelement/href/index.md @@ -0,0 +1,51 @@ +--- +title: "SVGTextPathElement: href property" +short-title: href +slug: Web/API/SVGTextPathElement/href +page-type: web-api-instance-property +browser-compat: api.SVGTextPathElement.href +--- + +{{APIRef("SVG")}} + +The **`href`** read-only property of the {{domxref("SVGTextPathElement")}} interface reflects the {{SVGAttr("href")}} attribute (or the deprecated {{SVGAttr("xlink:href")}} attribute) of the given {{SVGElement("textPath")}} element. + +## Value + +An {{domxref("SVGAnimatedString")}} object. + +## Examples + +### Accessing the `href` property + +```html + + + + + + + This text follows a path! + + + +``` + +```js +const textPath = document.getElementById("myTextPath"); + +// Access the href property +console.log(textPath.href.baseVal); // Output: "#myPath" +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- SVG {{SVGAttr("href")}} attribute diff --git a/files/en-us/web/api/svgtextpathelement/method/index.md b/files/en-us/web/api/svgtextpathelement/method/index.md new file mode 100644 index 000000000000000..53072a3a2439935 --- /dev/null +++ b/files/en-us/web/api/svgtextpathelement/method/index.md @@ -0,0 +1,52 @@ +--- +title: "SVGTextPathElement: method property" +short-title: method +slug: Web/API/SVGTextPathElement/method +page-type: web-api-instance-property +browser-compat: api.SVGTextPathElement.method +--- + +{{APIRef("SVG")}} + +The **`method`** read-only property of the {{domxref("SVGTextPathElement")}} interface reflects the {{SVGAttr("method")}} attribute of the given {{SVGElement("textPath")}} element. It takes one of the [`TEXTPATH_METHODTYPE_*` constants](/en-US/docs/Web/API/SVGTextPathElement#method_types) defined on this interface. + +## Value + +An {{domxref("SVGAnimatedEnumeration")}} object. + +## Examples + +### Accessing the `method` property + +```html + + + + + + + This text follows a path! + + + +``` + +```js +const textPath = document.getElementById("myTextPath"); + +// Access the method property +console.log(textPath.method.baseVal); // Output: 1 (TEXTPATH_METHODTYPE_ALIGN) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGTextPathElement.spacing")}} +- [`SVGTextPathElement` method types](/en-US/docs/Web/API/SVGTextPathElement#method_types) diff --git a/files/en-us/web/api/svgtextpathelement/spacing/index.md b/files/en-us/web/api/svgtextpathelement/spacing/index.md new file mode 100644 index 000000000000000..bfef01984afceef --- /dev/null +++ b/files/en-us/web/api/svgtextpathelement/spacing/index.md @@ -0,0 +1,52 @@ +--- +title: "SVGTextPathElement: spacing property" +short-title: spacing +slug: Web/API/SVGTextPathElement/spacing +page-type: web-api-instance-property +browser-compat: api.SVGTextPathElement.spacing +--- + +{{APIRef("SVG")}} + +The **`spacing`** read-only property of the {{domxref("SVGTextPathElement")}} interface reflects the {{SVGAttr("spacing")}} attribute of the given {{SVGElement("textPath")}} element. It takes one of the [`TEXTPATH_SPACINGTYPE_*` constants](/en-US/docs/Web/API/SVGTextPathElement#spacing_types) defined on this interface. + +## Value + +An {{domxref("SVGAnimatedEnumeration")}} object. + +## Examples + +### Accessing the `spacing` property + +```html + + + + + + + This text follows a path! + + + +``` + +```js +const textPath = document.getElementById("myTextPath"); + +// Access the spacing property +console.log(textPath.spacing.baseVal); // Output: 1 (TEXTPATH_SPACINGTYPE_AUTO) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGTextPathElement.method")}} +- [`SVGTextPathElement` spacing types](/en-US/docs/Web/API/SVGTextPathElement#spacing_types) diff --git a/files/en-us/web/api/svgtextpathelement/startoffset/index.md b/files/en-us/web/api/svgtextpathelement/startoffset/index.md new file mode 100644 index 000000000000000..b217586e42456d9 --- /dev/null +++ b/files/en-us/web/api/svgtextpathelement/startoffset/index.md @@ -0,0 +1,51 @@ +--- +title: "SVGTextPathElement: startOffset property" +short-title: startOffset +slug: Web/API/SVGTextPathElement/startOffset +page-type: web-api-instance-property +browser-compat: api.SVGTextPathElement.startOffset +--- + +{{APIRef("SVG")}} + +The **`startOffset`** read-only property of the {{domxref("SVGTextPathElement")}} interface reflects the X component of the {{SVGAttr("startOffset")}} attribute of the given {{SVGElement("textPath")}}, which defines an offset from the start of the path for the initial current text position along the path after converting the path to the `` element's coordinate system. + +## Value + +An {{domxref("SVGAnimatedLength")}} object. + +## Examples + +### Accessing the `startOffset` property + +```html + + + + + + + This text follows a path! + + + +``` + +```js +const textPath = document.getElementById("myTextPath"); + +// Access the startOffset property +console.log(textPath.startOffset.baseVal.valueAsString); // Output: "25%" +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- SVG {{SVGAttr("startOffset")}} attribute