You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The SVGWG resolved to add a new path-length CSS property to apply to paths in SVG. This issue tracks the CSSWG reviewing the syntax and making any necessary changes.
All the SVG geometry attributes (which take unitless numbers in their value) which upgraded to presentation attributes express their property value with lengths (or length-percentage). Just as the very first example of such a property I found in the index, the cx property (for the center of a <circle>) takes <length-percentage> (while the cx="" attribute takes a number).
path-length isn't special in any way here. It's defining a length, which other properties (stroke-dash-array, etc) refer to. Its grammar should be <length>. (I don't think there's anything that <percentage> could be relative to, so probably not useful here.)
The author's computation of the total length of the path, in user units. This value is used to calibrate the user agent's own distance-along-a-path calculations with that of the author. The user agent will scale all distance-along-a-path computations by the ratio of ‘pathLength’ to the user agent's own computed value for total path length.
@kbabbitt yes, that's correct. pathLength is the author's defined total path length, and the UA uses it to scale distance-along-a-path computations by the ratio of pathLength to its own computed value.
That said, I agree with Tab that it should use <length>. Even though it's used to derive a scaling ratio, the value itself is a length, and this follows the standard SVG attribute (<number>) → CSS property (<length>) pattern. The SVG WG was also aligned on making it <length> (minutes (https://www.w3.org/2026/03/26-svg-minutes.html)).
<percentage> doesn't make sense here though, no reference value to resolve against.
Yup, @viralipurbey is correct. "Applied as a scale factor" isn't particularly relevant here. It's specified as a length. A scale factor is then calculated from that, in concert with the UA's calculated length. (By dividing two lengths to form a dimensionless scale factor! The units check out. ^_^)
And specifically: only<length>, like the other attributes that only took numbers (representing SVG length units) and then were promoted to CSS properties (where the "SVG length unit" is the CSS px).
The CSS Working Group just discussed Review path-length syntax, and agreed to the following:
RESOLVED: path-length CSS property based on the SVG attribute will take <length> only
The full IRC log of that discussion
<JoshT> kbabbitt: SVG has the path-length attr
<JoshT> ... represents the authors computation of total path length
<iank_> (belated regrets from me sorry. If we can delay the replaced intrinsic sizing issue #6 on current agenda that'd be appreciated)
<JoshT> ... UA divides by its length of the path to make a ratio for things like text on a path
<JoshT> ... SVGWG resolved to add a path-length CSS property that works the same way. works same as other geometry properties
<JoshT> ... syntax is <number> using SVG user units
<JoshT> ... with consistency with others upgraded to CSS properties, we think it should take only a <length>
<JoshT> ... proposal is that we think path length--
<TabAtkins> yup that's it
<JoshT> ... path-length CSS property should take <length>
<JoshT> JoshT: and not including <number>?
<JoshT> astearns: SVGWG OK with a unitless number?
<JoshT> TabAtkins: they've been OK with that in other upgraded properties
<astearns> s/OK with/OK without/
<JoshT> PROPOSED: path-length CSS property based on the SVG attribute will take <length> only
<JoshT> RESOLVED: path-length CSS property based on the SVG attribute will take <length> only
All the SVG geometry attributes (which take unitless numbers in their value) which upgraded to presentation attributes express their property value with lengths (or length-percentage)
So Chromium is buggy on this testcase then ...
<!DOCTYPE html>
<style>
@supports(x: 1px) {
html { background: limegreen }
}
@supports(x: 1) {
html { background: tomato }
}
</style>
Background should be green.
Activity
tabatkins commentedon May 8, 2026
All the SVG geometry attributes (which take unitless numbers in their value) which upgraded to presentation attributes express their property value with lengths (or length-percentage). Just as the very first example of such a property I found in the index, the
cxproperty (for the center of a<circle>) takes<length-percentage>(while thecx=""attribute takes a number).path-lengthisn't special in any way here. It's defining a length, which other properties (stroke-dash-array, etc) refer to. Its grammar should be<length>. (I don't think there's anything that<percentage>could be relative to, so probably not useful here.)kbabbitt commentedon May 11, 2026
@viralipurbey can correct me if I'm wrong, but I think the reason
path-lengthtakes a<number>is that it's applied as a scaling factor. https://w3c.github.io/svgwg/svg2-draft/paths.html#PathLengthAttribute:(emphasis mine)
viralipurbey commentedon May 12, 2026
@kbabbitt yes, that's correct.
pathLengthis the author's defined total path length, and the UA uses it to scale distance-along-a-path computations by the ratio ofpathLengthto its own computed value.That said, I agree with Tab that it should use
<length>. Even though it's used to derive a scaling ratio, the value itself is a length, and this follows the standard SVG attribute (<number>) → CSS property (<length>) pattern. The SVG WG was also aligned on making it<length>(minutes (https://www.w3.org/2026/03/26-svg-minutes.html)).<percentage>doesn't make sense here though, no reference value to resolve against.tabatkins commentedon May 12, 2026
Yup, @viralipurbey is correct. "Applied as a scale factor" isn't particularly relevant here. It's specified as a length. A scale factor is then calculated from that, in concert with the UA's calculated length. (By dividing two lengths to form a dimensionless scale factor! The units check out. ^_^)
kbabbitt commentedon May 12, 2026
Thanks, I misunderstood how the value was applied, makes sense to me now.
kbabbitt commentedon May 19, 2026
Proposed resolution: the CSSWG thinks
path-lengthshould accept<length>tabatkins commentedon May 19, 2026
And specifically: only
<length>, like the other attributes that only took numbers (representing SVG length units) and then were promoted to CSS properties (where the "SVG length unit" is the CSSpx).css-meeting-bot commentedon May 20, 2026
The CSS Working Group just discussed
Review path-length syntax, and agreed to the following:RESOLVED: path-length CSS property based on the SVG attribute will take <length> onlyThe full IRC log of that discussion
<JoshT> kbabbitt: SVG has the path-length attr<JoshT> ... represents the authors computation of total path length
<iank_> (belated regrets from me sorry. If we can delay the replaced intrinsic sizing issue #6 on current agenda that'd be appreciated)
<JoshT> ... UA divides by its length of the path to make a ratio for things like text on a path
<JoshT> ... SVGWG resolved to add a path-length CSS property that works the same way. works same as other geometry properties
<JoshT> ... syntax is <number> using SVG user units
<JoshT> ... with consistency with others upgraded to CSS properties, we think it should take only a <length>
<JoshT> ... proposal is that we think path length--
<TabAtkins> yup that's it
<JoshT> ... path-length CSS property should take <length>
<JoshT> JoshT: and not including <number>?
<JoshT> astearns: SVGWG OK with a unitless number?
<JoshT> TabAtkins: they've been OK with that in other upgraded properties
<astearns> s/OK with/OK without/
<JoshT> PROPOSED: path-length CSS property based on the SVG attribute will take <length> only
<JoshT> RESOLVED: path-length CSS property based on the SVG attribute will take <length> only
1jj commentedon Jun 1, 2026
So Chromium is buggy on this testcase then ...
[SVG] Change `path-length` CSS property from <number> to <length>
[SVG] Change `path-length` CSS property from <number> to <length>
[SVG] Change `path-length` CSS property from <number> to <length>
Bug 2051916 [wpt PR 61020] - [SVG] Change `path-length` CSS property …
Bug 2051916 [wpt PR 61020] - [SVG] Change `path-length` CSS property …