v150 · CSS · SVG

The path-length: 0 Edge Case

The spec treats a zero total length as an infinite scaling factor: any non-zero dash value extends to infinity, so the stroke renders fully solid. Crucially, path-length: 0 is not the same as path-length: none — the initial value none means "no author-supplied length, use the geometric length".

stroke-dasharray: 300

why it works this way

/* The three behaviours, on the SAME path and the SAME dash value: */

.a { path-length: none;  }   /* initial value — use the geometric length */
.b { path-length: 1000;  }   /* normalized: dash 300 of 1000 = 30% drawn   */
.c { path-length: 0;     }   /* 0 = infinite scaling factor: any non-zero
                                dash extends to infinity → stroke is solid */

Per SVG 2 (and the path-length spec PR), a value of zero "must be treated as a scaling factor of infinity" — so stroke-dasharray: 300 against path-length: 0 means the single dash is infinitely long relative to the path, hence fully solid. This matches Blink's long-standing attribute behaviour; Chrome 150 simply exposes the same semantics through the CSS property. It is why none (initial) and 0 (explicit) are deliberately distinct values.

see also