v150 · CSS · SVG

Support path-length as a CSS property

Chrome 150 promotes the SVG pathLength presentation attribute to a first-class CSS property: path-length. That means the normalized total path length can now live in stylesheets, participate in the cascade, override the attribute, and — most importantly — be animated and transitioned, which unlocks CSS-driven stroke-dash progress along any geometry element.

concepts

  1. Dash-Driven Progress Along a Path

    The headline use case: set path-length: 1000 to normalize a path to a fixed total, then drive a progress fill with a single stroke-dasharray / stroke-dashoffset value — no getTotalLength() JavaScript. Drag the slider and watch the dash track the exact percentage you ask for.

  2. CSS Overrides the Presentation Attribute

    As a real CSS property, path-length now follows standard cascade precedence: a stylesheet declaration wins over the pathLength attribute, and it animates with @keyframes and transition. Toggle between the attribute value and a CSS override to see the dash re-scale live.

  3. Path-length Interpolation

    The property is numerically interpolable by CSS itself — transitions, @keyframes, and cascade participation, where the pathLength attribute previously needed SVG SMIL animation. Transition path-length between 100 and 20, with mid-flight getComputedStyle() samples proving the intermediate values and a dash pattern that re-scales with them.

  4. The path-length: 0 Edge Case

    The spec treats path-length: 0 as an infinite scaling factor: any non-zero dash extends to infinity and the stroke renders solid. Step through none, a normalized 1000, and 0 to see the three distinct behaviors — and why 0 is not the same as none.

why it shipped

Until now, pathLength was only available as an SVG presentation attribute, so it could not participate in the cascade, specificity, animations, or transitions — unlike sibling geometry properties such as r, cx, cy, x, y, and d, which were already exposed as CSS. That meant CSS-driven stroke-dash animations and text-on-path effects that depend on a scalable length required JavaScript (getTotalLength()) or workarounds. Promoting it to path-length closes that gap: path-length: 1000 lets you reason about a path in normalized units (so stroke-dasharray: 250 is exactly 25% of the path) and animate the length itself. The initial value none is distinct from an explicit 0. Existing attribute-only behaviour is preserved when the feature is disabled.

references