From e43cf53981f2c1a6513581257c064a8d4c893d67 Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Tue, 23 Jun 2026 16:16:35 +0100 Subject: [PATCH 1/6] Document the path-length CSS property --- .../reference/properties/path-length/index.md | 182 ++++++++++++++++++ .../web/svg/reference/attribute/index.md | 1 + .../reference/attribute/pathlength/index.md | 7 + 3 files changed, 190 insertions(+) create mode 100644 files/en-us/web/css/reference/properties/path-length/index.md diff --git a/files/en-us/web/css/reference/properties/path-length/index.md b/files/en-us/web/css/reference/properties/path-length/index.md new file mode 100644 index 000000000000000..aecb0ee68654c2c --- /dev/null +++ b/files/en-us/web/css/reference/properties/path-length/index.md @@ -0,0 +1,182 @@ +--- +title: "`path-length` CSS property" +short-title: path-length +slug: Web/CSS/Reference/Properties/path-length +page-type: css-property +browser-compat: css.properties.path-length +sidebar: cssref +--- + +The **`path-length`** [CSS](/en-US/docs/Web/CSS) property specifies a total path length, in user units. This value is then used to calibrate the browser's distance calculations with those of the author, by scaling all distance computations using the ratio path-length / _(computed value of path length)_. + +This can affect the browser's distance-along-a-path calculations and therefore the actual rendered lengths of paths — this includes text paths, animation paths, and various stroke operations. + +If present, the `path-length` CSS property overrides an SVG element's {{SVGAttr("pathLength")}} attribute. + +> [!NOTE] +> The `path-length` property only applies to {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, and {{SVGElement("rect")}} elements nested in an {{SVGElement("svg")}}. It doesn't apply to other SVG, HTML, or pseudo-elements. + +## Syntax + +```css +/* Keywords */ +path-length: none; + +/* values */ +path-length: 0; +path-length: 70; +path-length: 500; + +/* Global values */ +path-length: inherit; +path-length: initial; +path-length: revert; +path-length: revert-layer; +path-length: unset; +``` + +### Values + +- `none` + - : No author path length is specified and the user agent's own computed path length is used for all path-related calculations. + +- `` + - : A non-negative unitless value representing an author-defined total path length, in user units. + +## Formal definition + +{{CSSInfo}} + +## Formal syntax + +{{csssyntax}} + +## Examples + +### Basic usage + +This example defines a path and shows how to apply a path length to it using the `path-length` CSS property. + +#### SVG + +Our SVG defines a single curved {{SVGElement("path")}} element with a colored {{SVGAttr("stroke")}}. It includes a {{SVGAttr("stroke-dasharray")}} attribute that defines a regular dashed pattern for the stroke. + +```html live-sample___basic-path-length live-sample___path-length-animation + + + +``` + +#### CSS + +We set a `path-length` value on the ``: + +```css live-sample___basic-path-length +path { + path-length: 500; +} +``` + +#### Results + +{{EmbedLiveSample("basic-path-length", "100%", "230")}} + +Setting a large `path-length` value results in the dashes becoming smaller and more frequent. + +### Animating `path-length` + +One major advantage of making `path-length` available as a CSS property is that you can apply standard CSS functionality such as [animations](/en-US/docs/Web/CSS/Guides/Animations) and [transitions](/en-US/docs/Web/CSS/Guides/Transitions) to it. This example builds on the previous one, showing how to animate a `path-length` with a CSS animation. + +#### HTML and SVG + +This example includes the same SVG `` as the previous one. In addition, it includes an [``](/en-US/docs/Web/HTML/Reference/Elements/input/range) element that can be used to change the value of `path-length` applied to the `` at runtime. We also include an {{htmlelement("output")}} element to display the current slider value. + +```html live-sample___path-length-animation +
+ + + 200 +
+``` + +#### CSS + +On the {{cssxref(":root")}} element, we define a [CSS custom property](/en-US/docs/Web/CSS/Reference/Properties/--*) called `--path-length` and give it an initial value of `200`. We then set the `` element's `path-length` value to the `--path-length` property, and set an {{cssxref("animation")}} on it that runs an infinite number of times and alternates between forwards and backwards. + +```css live-sample___path-length-animation +:root { + --path-length: 200; +} + +path { + path-length: var(--path-length); + animation: path-length-anim 2s alternate infinite ease-in-out; +} +``` + +```css hidden live-sample___path-length-animation +div { + position: fixed; + bottom: 0; + left: 0; + display: flex; + align-items: center; +} +``` + +Next, we define the {{cssxref("@keyframes")}} block for the animation — it animates the `path-length` property between the `--path-length` value and the `--path-length` value multiplied by `1.5`. + +```css live-sample___path-length-animation +@keyframes path-length-anim { + from { + path-length: var(--path-length); + } + + to { + path-length: calc(var(--path-length) * 1.5); + } +} +``` + +#### JavaScript + +We start our script by grabbing references to the ``, ``, and `:root` elements. + +```js live-sample___path-length-animation +const slider = document.querySelector("input"); +const output = document.querySelector("output"); +const rootElem = document.querySelector(":root"); +``` + +Next, we add an `input` event handler to the range slider so that, when its value is changed, the `` element's `textContent` and the value of the `--path-length` custom property are set to equal the slider's new value. + +```js live-sample___path-length-animation +slider.addEventListener("input", () => { + output.textContent = slider.value; + rootElem.style.setProperty("--path-length", slider.value); +}); +``` + +#### Results + +{{EmbedLiveSample("path-length-animation", "100%", "230")}} + +Adjust the slider, and note how larger values rules in a smaller dash size. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- SVG {{SVGAttr("pathLength")}} attribute +- Presentation properties: {{cssxref("fill")}}, {{cssxref("clip-rule")}}, {{cssxref("color-interpolation-filters")}}, {{cssxref("fill-opacity")}}, {{cssxref("fill-rule")}}, {{cssxref("marker-end")}}, {{cssxref("marker-mid")}}, {{cssxref("marker-start")}}, `path-length`, {{cssxref("shape-rendering")}}, {{cssxref("stop-color")}}, {{cssxref("stop-opacity")}}, {{cssxref("stroke")}}, {{cssxref("stroke-dasharray")}}, {{cssxref("stroke-dashoffset")}}, {{cssxref("stroke-linecap")}}, {{cssxref("stroke-linejoin")}}, {{cssxref("stroke-miterlimit")}}, {{cssxref("stroke-opacity")}}, {{cssxref("stroke-width")}}, {{cssxref("text-anchor")}}, and {{cssxref("vector-effect")}} diff --git a/files/en-us/web/svg/reference/attribute/index.md b/files/en-us/web/svg/reference/attribute/index.md index a78adff1422c095..5d76d6b3c0eb1d2 100644 --- a/files/en-us/web/svg/reference/attribute/index.md +++ b/files/en-us/web/svg/reference/attribute/index.md @@ -378,6 +378,7 @@ Most presentation attributes inherit when used as CSS properties (for example, { - {{SVGAttr("mask-type")}} - {{SVGAttr("opacity")}} - {{SVGAttr("overflow")}} +- {{SVGAttr("pathLength")}} - {{SVGAttr("pointer-events")}} - {{SVGAttr("r")}} - {{SVGAttr("rx")}} diff --git a/files/en-us/web/svg/reference/attribute/pathlength/index.md b/files/en-us/web/svg/reference/attribute/pathlength/index.md index 5dde692bbba7cdc..8f4c938f2458efb 100644 --- a/files/en-us/web/svg/reference/attribute/pathlength/index.md +++ b/files/en-us/web/svg/reference/attribute/pathlength/index.md @@ -20,6 +20,9 @@ You can use this attribute with the following SVG elements: - {{SVGElement('polyline')}} - {{SVGElement('rect')}} +> [!NOTE] +> The `pathLength` attribute also has a CSS property counterpart: [`path-length`](/en-US/docs/Web/CSS/Reference/Properties/path-length). When both are specified, the CSS property takes priority. + ## Example ```css hidden @@ -238,3 +241,7 @@ For {{SVGElement('rect')}}, `pathLength` lets authors specify a total length for ## Specifications {{Specifications}} + +## See also + +- [`path-length`](/en-US/docs/Web/CSS/Reference/Properties/path-length) CSS property From 34cce86c8d6555f2c82fe077026c08115003bd0d Mon Sep 17 00:00:00 2001 From: Hamish Willee Date: Mon, 20 Jul 2026 17:17:03 +1000 Subject: [PATCH 2/6] Claude fixes --- files/en-us/web/css/reference/properties/index.md | 1 + .../en-us/web/css/reference/properties/path-length/index.md | 6 +++--- files/en-us/web/svg/reference/attribute/pathlength/index.md | 4 ++-- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/files/en-us/web/css/reference/properties/index.md b/files/en-us/web/css/reference/properties/index.md index 350fc772729cc6c..9c2ccbc210410ec 100644 --- a/files/en-us/web/css/reference/properties/index.md +++ b/files/en-us/web/css/reference/properties/index.md @@ -447,6 +447,7 @@ Standard properties defined by CSS specifications include the following: - {{CSSxRef("page-break-inside")}} - {{CSSxRef("page")}} - {{CSSxRef("paint-order")}} +- {{CSSxRef("path-length")}} - {{CSSxRef("perspective-origin")}} - {{CSSxRef("perspective")}} - {{CSSxRef("place-content")}} (shorthand) diff --git a/files/en-us/web/css/reference/properties/path-length/index.md b/files/en-us/web/css/reference/properties/path-length/index.md index aecb0ee68654c2c..11bf870c73073da 100644 --- a/files/en-us/web/css/reference/properties/path-length/index.md +++ b/files/en-us/web/css/reference/properties/path-length/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.path-length sidebar: cssref --- -The **`path-length`** [CSS](/en-US/docs/Web/CSS) property specifies a total path length, in user units. This value is then used to calibrate the browser's distance calculations with those of the author, by scaling all distance computations using the ratio path-length / _(computed value of path length)_. +The **`path-length`** [CSS](/en-US/docs/Web/CSS) property specifies a total path length, in user units. This value is then used to calibrate the browser's distance calculations with those of the author, by scaling all distance computations using the ratio `path-length` / _(computed value of path length)_. This can affect the browser's distance-along-a-path calculations and therefore the actual rendered lengths of paths — this includes text paths, animation paths, and various stroke operations. @@ -99,7 +99,7 @@ This example includes the same SVG `` as the previous one. In addition, it ```html live-sample___path-length-animation
- + 200
``` @@ -166,7 +166,7 @@ slider.addEventListener("input", () => { {{EmbedLiveSample("path-length-animation", "100%", "230")}} -Adjust the slider, and note how larger values rules in a smaller dash size. +Adjust the slider, and note how larger values result in a smaller dash size. ## Specifications diff --git a/files/en-us/web/svg/reference/attribute/pathlength/index.md b/files/en-us/web/svg/reference/attribute/pathlength/index.md index 8f4c938f2458efb..1f3152316abb6ad 100644 --- a/files/en-us/web/svg/reference/attribute/pathlength/index.md +++ b/files/en-us/web/svg/reference/attribute/pathlength/index.md @@ -21,7 +21,7 @@ You can use this attribute with the following SVG elements: - {{SVGElement('rect')}} > [!NOTE] -> The `pathLength` attribute also has a CSS property counterpart: [`path-length`](/en-US/docs/Web/CSS/Reference/Properties/path-length). When both are specified, the CSS property takes priority. +> As a presentation attribute, `pathLength` also has a CSS property counterpart: {{cssxref("path-length")}}. When both are specified, the CSS property takes priority. ## Example @@ -244,4 +244,4 @@ For {{SVGElement('rect')}}, `pathLength` lets authors specify a total length for ## See also -- [`path-length`](/en-US/docs/Web/CSS/Reference/Properties/path-length) CSS property +- CSS {{cssxref("path-length")}} property From 8dab85d5ec438854b583fa2e958acfc0a1c53168 Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Mon, 20 Jul 2026 11:26:50 +0100 Subject: [PATCH 3/6] Update files/en-us/web/css/reference/properties/path-length/index.md Co-authored-by: Hamish Willee --- .../en-us/web/css/reference/properties/path-length/index.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/css/reference/properties/path-length/index.md b/files/en-us/web/css/reference/properties/path-length/index.md index 11bf870c73073da..7174f85c6f6bd32 100644 --- a/files/en-us/web/css/reference/properties/path-length/index.md +++ b/files/en-us/web/css/reference/properties/path-length/index.md @@ -11,10 +11,11 @@ The **`path-length`** [CSS](/en-US/docs/Web/CSS) property specifies a total path This can affect the browser's distance-along-a-path calculations and therefore the actual rendered lengths of paths — this includes text paths, animation paths, and various stroke operations. -If present, the `path-length` CSS property overrides an SVG element's {{SVGAttr("pathLength")}} attribute. +The `path-length` property only applies to {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, and {{SVGElement("rect")}} elements nested in an {{SVGElement("svg")}}. > [!NOTE] -> The `path-length` property only applies to {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, and {{SVGElement("rect")}} elements nested in an {{SVGElement("svg")}}. It doesn't apply to other SVG, HTML, or pseudo-elements. +> If present, the `path-length` CSS property overrides an SVG element's {{SVGAttr("pathLength")}} attribute. +> This property doesn't apply to SVG, HTML, or pseudo-elements other than those listed above. ## Syntax From e27ffceed6936bf1186e0a2aac0b1723be460884 Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Mon, 20 Jul 2026 11:39:32 +0100 Subject: [PATCH 4/6] A few review fix updates --- .../web/css/reference/properties/path-length/index.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/files/en-us/web/css/reference/properties/path-length/index.md b/files/en-us/web/css/reference/properties/path-length/index.md index 7174f85c6f6bd32..9d43af2ac671991 100644 --- a/files/en-us/web/css/reference/properties/path-length/index.md +++ b/files/en-us/web/css/reference/properties/path-length/index.md @@ -11,7 +11,7 @@ The **`path-length`** [CSS](/en-US/docs/Web/CSS) property specifies a total path This can affect the browser's distance-along-a-path calculations and therefore the actual rendered lengths of paths — this includes text paths, animation paths, and various stroke operations. -The `path-length` property only applies to {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, and {{SVGElement("rect")}} elements nested in an {{SVGElement("svg")}}. +The `path-length` property only applies to {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, and {{SVGElement("rect")}} elements nested in an {{SVGElement("svg")}}. > [!NOTE] > If present, the `path-length` CSS property overrides an SVG element's {{SVGAttr("pathLength")}} attribute. @@ -85,7 +85,7 @@ path { #### Results -{{EmbedLiveSample("basic-path-length", "100%", "230")}} +{{EmbedLiveSample("basic-path-length", "100%", "250")}} Setting a large `path-length` value results in the dashes becoming smaller and more frequent. @@ -165,7 +165,7 @@ slider.addEventListener("input", () => { #### Results -{{EmbedLiveSample("path-length-animation", "100%", "230")}} +{{EmbedLiveSample("path-length-animation", "100%", "250")}} Adjust the slider, and note how larger values result in a smaller dash size. @@ -180,4 +180,3 @@ Adjust the slider, and note how larger values result in a smaller dash size. ## See also - SVG {{SVGAttr("pathLength")}} attribute -- Presentation properties: {{cssxref("fill")}}, {{cssxref("clip-rule")}}, {{cssxref("color-interpolation-filters")}}, {{cssxref("fill-opacity")}}, {{cssxref("fill-rule")}}, {{cssxref("marker-end")}}, {{cssxref("marker-mid")}}, {{cssxref("marker-start")}}, `path-length`, {{cssxref("shape-rendering")}}, {{cssxref("stop-color")}}, {{cssxref("stop-opacity")}}, {{cssxref("stroke")}}, {{cssxref("stroke-dasharray")}}, {{cssxref("stroke-dashoffset")}}, {{cssxref("stroke-linecap")}}, {{cssxref("stroke-linejoin")}}, {{cssxref("stroke-miterlimit")}}, {{cssxref("stroke-opacity")}}, {{cssxref("stroke-width")}}, {{cssxref("text-anchor")}}, and {{cssxref("vector-effect")}} From 9cae5f4a77d7e2e327c029a51aebfd533a490b65 Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Mon, 20 Jul 2026 11:54:35 +0100 Subject: [PATCH 5/6] A few more fixes --- files/en-us/web/css/reference/properties/path-length/index.md | 2 +- files/en-us/web/svg/reference/attribute/pathlength/index.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/css/reference/properties/path-length/index.md b/files/en-us/web/css/reference/properties/path-length/index.md index 9d43af2ac671991..0ea78ff08c9f232 100644 --- a/files/en-us/web/css/reference/properties/path-length/index.md +++ b/files/en-us/web/css/reference/properties/path-length/index.md @@ -42,7 +42,7 @@ path-length: unset; - : No author path length is specified and the user agent's own computed path length is used for all path-related calculations. - `` - - : A non-negative unitless value representing an author-defined total path length, in user units. + - : A non-negative unitless value representing an author-defined total path length, in user units. A user unit in SVG is a unit of length defined in the current user coordinate system, which is typically equivalent to one pixel on the output device. ## Formal definition diff --git a/files/en-us/web/svg/reference/attribute/pathlength/index.md b/files/en-us/web/svg/reference/attribute/pathlength/index.md index 1f3152316abb6ad..bad833d3df91a75 100644 --- a/files/en-us/web/svg/reference/attribute/pathlength/index.md +++ b/files/en-us/web/svg/reference/attribute/pathlength/index.md @@ -21,7 +21,7 @@ You can use this attribute with the following SVG elements: - {{SVGElement('rect')}} > [!NOTE] -> As a presentation attribute, `pathLength` also has a CSS property counterpart: {{cssxref("path-length")}}. When both are specified, the CSS property takes priority. +> The `pathLength` attribute also has a CSS property counterpart: [`path-length`](/en-US/docs/Web/CSS/Reference/Properties/path-length). When both are specified, the CSS property takes priority. ## Example From ec3ad7b569a853cc9e8694dfa1dc543b7a6ba56a Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Wed, 22 Jul 2026 08:44:08 +0100 Subject: [PATCH 6/6] Remove incorrect/confusing bits --- .../en-us/web/css/reference/properties/path-length/index.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/files/en-us/web/css/reference/properties/path-length/index.md b/files/en-us/web/css/reference/properties/path-length/index.md index 0ea78ff08c9f232..c6e78f21e8c6031 100644 --- a/files/en-us/web/css/reference/properties/path-length/index.md +++ b/files/en-us/web/css/reference/properties/path-length/index.md @@ -7,9 +7,7 @@ browser-compat: css.properties.path-length sidebar: cssref --- -The **`path-length`** [CSS](/en-US/docs/Web/CSS) property specifies a total path length, in user units. This value is then used to calibrate the browser's distance calculations with those of the author, by scaling all distance computations using the ratio `path-length` / _(computed value of path length)_. - -This can affect the browser's distance-along-a-path calculations and therefore the actual rendered lengths of paths — this includes text paths, animation paths, and various stroke operations. +The **`path-length`** [CSS](/en-US/docs/Web/CSS) property specifies a total path length, in user units. All path computations are then scaled using the ratio `path-length` / _(computed value of path length)_ — this includes text paths, animation paths, and various stroke operations. The `path-length` property only applies to {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, and {{SVGElement("rect")}} elements nested in an {{SVGElement("svg")}}. @@ -42,7 +40,7 @@ path-length: unset; - : No author path length is specified and the user agent's own computed path length is used for all path-related calculations. - `` - - : A non-negative unitless value representing an author-defined total path length, in user units. A user unit in SVG is a unit of length defined in the current user coordinate system, which is typically equivalent to one pixel on the output device. + - : A non-negative unitless value representing an author-defined total path length, in user units. ## Formal definition