v150 · CSS · SVG

CSS Overrides the Presentation Attribute

Because path-length is now a real CSS property, it follows standard cascade rules: a stylesheet declaration beats the pathLength presentation attribute, and — unlike the attribute — it can be animated with @keyframes and transition.

side by side: attribute vs CSS

Both circles have the same geometry and the same stroke-dasharray: 250. The left one normalizes via the pathLength="500" attribute; the right one uses the CSS property path-length: 1000. Same dash value, different normalized total → different drawn fraction.

pathLength="500" → dash 250/500 = 50% drawn
presentation attribute:
pathLength="500"
CSS property:
path-length: 1000

cascade override

Now set both the attribute and the CSS property on one element and toggle the CSS on/off. The CSS declaration wins whenever it is present — exactly like width overriding a width attribute.

animated (CSS-driven, no JS measuring)

The dash below loops the entire path purely with a CSS @keyframes rule on stroke-dashoffset. The total is normalized to 1000 by the CSS path-length property, so the animation travels exactly one full revolution. This was impossible with the attribute alone.

code

/* CSS declaration beats the presentation attribute */
circle {
  path-length: 1000;          /* wins over pathLength="2000" */
  stroke-dasharray: 250;       /* 25% of the normalized 1000 */
}

/* And it animates — travel one full revolution: */
@keyframes spin-dash {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -1000; }   /* one normalized total */
}
.traveller {
  path-length: 1000;
  stroke-dasharray: 300 700;
  animation: spin-dash 3s linear infinite;
}

see also