SVG getTotalLength() Method
getTotalLength() returns a path's total rendered length, the essential first step for many path-based animations and calculations.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Measuring a Path's Total Length
Calling getTotalLength() on an SVG path element returns the total length of the path in user units, accounting for all its curves and segments, which is the foundational measurement needed before setting up a stroke-dash draw-on animation or iterating getPointAtLength() across the full path.
- getTotalLength() returns the path's full length in user units
- Accounts for all curves and segments in the path's geometry
- Provides the foundational measurement for many path-based techniques
Using getTotalLength() for Draw-On Animations
The classic stroke draw-on animation sets both stroke-dasharray and the initial stroke-dashoffset to the value returned by getTotalLength(), then animates the offset to zero, revealing the stroke as if it's being drawn — getTotalLength() provides the exact value needed for this to work regardless of the path's specific shape.
- Set stroke-dasharray and stroke-dashoffset to the getTotalLength() value
- Animating the offset to zero creates the classic draw-on reveal effect
- Provides the exact value needed for the effect regardless of path shape
Frequently Asked Questions
Can I avoid getTotalLength() by using the pathLength attribute instead?
Yes, setting pathLength="100" on the path lets you use round percentage-based dash values without measuring the real length via getTotalLength(), which is a common simpler alternative for pure CSS animations.
Does getTotalLength() account for stroke width in its measurement?
No, getTotalLength() measures the length of the path's centerline geometry itself, independent of any stroke width applied to it.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG