Intent to Ship: Support 'path-length' as a CSS property.
Virali Purbey
Contact emails
Specification
https://github.com/w3c/svgwg/pull/1073
Summary
This change introduces a new CSS property, 'path-length', which maps to the existing SVG 'pathLength' presentation attribute. It applies to SVG geometry elements that support
'pathLength' (including <path>, <circle>, <rect>, <line>, <polyline>, <polygon>, and <ellipse>).
Exposing 'pathLength' as a CSS property allows authors to specify it via stylesheets, inline styles, and animations, enabling it to participate in normal CSS cascading, specificity, transitions, and animations. The property affects all computations that depend
on the total path length, including stroke dash rendering and text positioning along a <textPath>.
CSS declarations override the presentation attribute following standard CSS precedence rules. The initial value of 'path-length' is 'none', which represents the absence of an author-supplied path length and is distinct from an explicit numeric value such as
'0'.
Existing attribute-only behavior is preserved when the feature is disabled.
Blink component
Web Feature ID
Motivation
Today, 'pathLength' can only be specified as an SVG presentation attribute. As a result, it cannot participate in the CSS cascade, specificity, animations, or transitions,
unlike other SVG geometry properties such as 'r', 'cx', 'cy', 'x', 'y', and 'd', which are already exposed as CSS properties.
This limitation prevents authors from controlling total path length using stylesheets, overriding presentation attributes via CSS, or animating 'pathLength' using standard CSS animation and transition mechanisms. Common authoring patterns, such as CSS-driven
stroke dash animations and text-on-path effects that rely on scalable path length, require workarounds or script today.
Promoting 'pathLength' to a CSS property aligns it with existing SVG geometry properties, enables full participation in CSS cascading and animation, and closes a long-standing authoring gap identified by the SVG Working Group (
https://github.com/w3c/svgwg/issues/773).
Existing attribute behavior is preserved, with CSS declarations taking precedence according to standard cascade rules.
Initial public proposal
No information provided
TAG review
Not requested. This property exposes existing SVG `pathLength` attribute behavior through CSS with no new capabilities, no new security surface, and no change to default rendering. It follows the same pattern as other SVG presentation attributes already shipped as CSS properties (`cx`, `cy`, `r`, `d`, etc.)
TAG review status
Not applicable
Goals for experimentation
None
Risks
Interoperability and Compatibility
Behavior change risk:
Previously, pathLength was only accessible as an SVG presentation attribute. This change introduces a new path-length CSS property that maps to the existing SVG behavior. Because this is a new CSS property and does not alter default rendering when unused, the
risk to existing content is minimal. The presentation attribute mapping follows standard SVG/CSS cascade rules, meaning CSS declarations take precedence over the pathLength attribute, consistent with how other SVG presentation attributes behave.
Mitigation:
The feature is guarded by a Finch flag (SvgPathLengthCssProperty), which can be used as a kill switch if unexpected compatibility issues arise.
Edge cases:
Blink treats `path-length: 0` as an infinite scaling factor: any non-zero dash value in `stroke-dasharray` extends to infinity, rendering the stroke as solid. This matches the SVG 2 spec text ("a value of zero is valid and must be treated as a scaling factor
of infinity"). Earlier WG discussions on zero-value semantics ( https://github.com/w3c/svgwg/issues/81,
https://github.com/w3c/svgwg/issues/383)
have been resolved and closed. The spec PR ( https://github.com/w3c/svgwg/pull/1073)
has WG consensus and codifies this behavior. This change preserves Blink's existing attribute semantics for `pathLength = 0` while exposing the same behavior through CSS, verified by `path-length-css-zero.tentative.svg`.
Gecko:
No signal
https://github.com/mozilla/standards-positions/issues/1363
WebKit:
No signal
https://github.com/WebKit/standards-positions/issues/621
Web developers:
Positive
8 users have upvoted for this CrBug.
Other signals:
Security
This feature introduces a new CSS property for an existing SVG concept (`pathLength`). It does not add new capabilities beyond what authors can already express via the `pathLength` attribute, and it reuses existing `parsing/rendering` logic. No new cross-origin access, network access, or privilege changes are introduced.
WebView application risks
Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?
No. This change does not deprecate or modify existing APIs. It introduces a new CSS property that maps to an existing SVG presentation attribute and preserves existing attribute-only behavior when the feature flag is disabled.
Debuggability
Issues related to this feature are debuggable using existing CSS and SVG inspection tools. The computed value of `path-length` is visible in DevTools’ Computed Style panel. Invalid values are rejected at parse time, and the "none" initial value is represented distinctly from authored numeric values (including 0). No new debugging tooling is required.
Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?
Yes
Is this feature fully tested by web-platform-tests?
Yes
Parsing:
- Valid values: https://wpt.fyi/results/svg/geometry/parsing/path-length-valid.tentative.svg
- Invalid values: https://wpt.fyi/results/svg/geometry/parsing/path-length-invalid.tentative.svg
- Computed values: https://wpt.fyi/results/svg/geometry/parsing/path-length-computed.tentative.svg
Property behavior:
- Inheritance: https://wpt.fyi/results/svg/path/property/inheritance.tentative.svg
Animations:
- SVG animate element: https://wpt.fyi/results/svg/animations/animate-pathLength.tentative.html
- CSS interpolation: https://wpt.fyi/results/svg/path/animations/path-length-interpolation.tentative.html
Rendering / distance:
- CSS path-length rendering: https://wpt.fyi/results/svg/path/distance/path-length-css-property.tentative.svg
- CSS overrides presentation attribute: https://wpt.fyi/results/svg/path/distance/path-length-css-overrides-presentation-attribute.tentative.svg
- Zero value handling (path-length: 0): https://wpt.fyi/results/svg/path/distance/path-length-css-zero.tentative.svg
Text on path:
- textPath with display:none: https://wpt.fyi/results/svg/text/reftests/textpath-pathlength-css-display-none.tentative.svg
Flag name on about://flags
No information provided
Finch feature name
SvgPathLengthCssProperty
Rollout plan
Will ship enabled for all users
Requires code in //chrome?
False
Tracking bug
https://issues.chromium.org/issues/40670251
Estimated milestones
|
Shipping on desktop
|
149
|
|
Shipping on Android
|
149
|
|
Shipping on WebView
|
149
|
Anticipated spec changes
Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).
The spec PR ( https://github.com/w3c/svgwg/pull/1073) has WG consensus and is about to be merged. No anticipated spec changes that would introduce web compat or interop risk.
Link to entry on the Chrome Platform Status
https://chromestatus.com/feature/4861677550043136?gate=5806183338344448
This intent message was generated by Chrome Platform Status.
From <https://chromestatus.com/feature/4861677550043136/gate/5806183338344448/intent>
Vladimir Levin
Rick Byers
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/43c88a25-5bcb-437f-bba8-15b7a5828ffcn%40chromium.org.
Daniel Bratell
LGTM3
(note Vlad's comment)
/Daniel
Virali Purbey
Yes, the parsing wpt links were not right. Updated it now. Thanks for pointing it out.