Example code for animated svg paths

svg-animation.js

<script>  
var state = 0;  
function next_action()  
{
    var svg = document.getElementById("svg-container").contentDocument;
    switch(state)
    {
        case 0:
            svg.getElementById("DP1").setAttribute("class", "animatedInfoBubble");
            state++;
            break;
        case 1:
            svg.getElementById("DP1-DP2").setAttribute("class", "animatedPath");
            setTimeout(function(){
                svg.getElementById("DP2").setAttribute("class", "animatedInfoBubble");
            }, 350);
            state++;
            break;
        case 2:
            svg.getElementById("DP2-DP3").setAttribute("class", "animatedPath");
            setTimeout(function(){
                svg.getElementById("DP3").setAttribute("class", "animatedInfoBubble");
            }, 240);
            state++;
            break;
        case 3:
            svg.getElementById("DP3-DP4").setAttribute("class", "animatedPath");
            setTimeout(function(){
                svg.getElementById("DP4").setAttribute("class", "animatedInfoBubble");
            }, 240);
            state++;
            break;
        case 4:
            svg.getElementById("DP1-DP2").setAttribute("class", "hiddenPath");
            svg.getElementById("DP2-DP3").setAttribute("class", "hiddenPath");
            svg.getElementById("DP3-DP4").setAttribute("class", "hiddenPath");
            svg.getElementById("DP1").setAttribute("class", "hiddenInfoBubble");
            svg.getElementById("DP2").setAttribute("class", "hiddenInfoBubble");
            svg.getElementById("DP3").setAttribute("class", "hiddenInfoBubble");
            svg.getElementById("DP4").setAttribute("class", "hiddenInfoBubble");
            state = 0;
            break;
    }
}
</script>