forked from mdn/content
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
New Pages: SVGTextPathElement (mdn#37399)
* New Pages: SVGTextPathElement * Update files/en-us/web/api/svgtextpathelement/href/index.md Co-authored-by: Estelle Weyl <[email protected]> * Update files/en-us/web/api/svgtextpathelement/href/index.md Co-authored-by: Estelle Weyl <[email protected]> * Update files/en-us/web/api/svgtextpathelement/method/index.md Co-authored-by: Estelle Weyl <[email protected]> * Update files/en-us/web/api/svgtextpathelement/method/index.md Co-authored-by: Estelle Weyl <[email protected]> * Update files/en-us/web/api/svgtextpathelement/method/index.md Co-authored-by: Estelle Weyl <[email protected]> * Update files/en-us/web/api/svgtextpathelement/spacing/index.md Co-authored-by: Estelle Weyl <[email protected]> * Update files/en-us/web/api/svgtextpathelement/spacing/index.md Co-authored-by: Estelle Weyl <[email protected]> * Update files/en-us/web/api/svgtextpathelement/startoffset/index.md Co-authored-by: Estelle Weyl <[email protected]> * Update files/en-us/web/api/svgtextpathelement/startoffset/index.md Co-authored-by: Estelle Weyl <[email protected]> * add: constant name to spacing --------- Co-authored-by: Estelle Weyl <[email protected]>
- Loading branch information
1 parent
ed8d1fc
commit cb6a3d6
Showing
4 changed files
with
206 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"> | ||
| <defs> | ||
| <path id="myPath" d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" /> | ||
| </defs> | ||
| <text font-size="20" fill="blue"> | ||
| <textPath id="myTextPath" href="#myPath"> | ||
| This text follows a path! | ||
| </textPath> | ||
| </text> | ||
| </svg> | ||
| ``` | ||
|
|
||
| ```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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"> | ||
| <defs> | ||
| <path id="myPath" d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" /> | ||
| </defs> | ||
| <text font-size="20" fill="blue"> | ||
| <textPath id="myTextPath" href="#myPath" method="align"> | ||
| This text follows a path! | ||
| </textPath> | ||
| </text> | ||
| </svg> | ||
| ``` | ||
|
|
||
| ```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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"> | ||
| <defs> | ||
| <path id="myPath" d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" /> | ||
| </defs> | ||
| <text font-size="20" fill="blue"> | ||
| <textPath id="myTextPath" href="#myPath" spacing="auto"> | ||
| This text follows a path! | ||
| </textPath> | ||
| </text> | ||
| </svg> | ||
| ``` | ||
|
|
||
| ```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) |
51 changes: 51 additions & 0 deletions
51
files/en-us/web/api/svgtextpathelement/startoffset/index.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 `<textPath>` element's coordinate system. | ||
|
|
||
| ## Value | ||
|
|
||
| An {{domxref("SVGAnimatedLength")}} object. | ||
|
|
||
| ## Examples | ||
|
|
||
| ### Accessing the `startOffset` property | ||
|
|
||
| ```html | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"> | ||
| <defs> | ||
| <path id="myPath" d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" /> | ||
| </defs> | ||
| <text font-size="20" fill="blue"> | ||
| <textPath id="myTextPath" href="#myPath" startOffset="25%"> | ||
| This text follows a path! | ||
| </textPath> | ||
| </text> | ||
| </svg> | ||
| ``` | ||
|
|
||
| ```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 |