score:0

You just need to properly set combination of stroke-dasharray and stroke-dashoffset. One option is to set the stroke-dasharray as one "long" line and one "long" space, set stroke-dashoffset such that the line is intially only the space and update the value of stroke-dashoffset to show the relevant part of the path:

<!DOCTYPE html>
<html>
<body>
    <svg width="300" height="300">
        <path id="path0" d="M 50 50 H 250 L 50 250 H 250" stroke-width="5" stroke="black" fill="none" stroke-dasharray="1000 1000" stroke-dashoffset="1000"/>
    </svg>
    <script>
        var p = document.getElementById("path0")
        var i = 1000
        setInterval(function(){ p.setAttribute("stroke-dashoffset",i--) },10)
    </script>
</body>
</html>

score:0

I realized from @ccprog's comment my path had multiple "M" commands, which would explain why there is no "continuous" animation. I realized this must be done because an object orbiting Earth goes around the sphere, but SVG's are not able to convey this--hence the multiple "M" commands.

What I ended up doing is taking the generated path attribute and breaking it up into sub-paths and adding an animation-delay.


Related Query

More Query from same tag