Can velocity.js animate points inside a polygon tag

Question

I am trying to morph a large number of svg polygons into some other svg polygons by using the points inside the other svg as destination. I read on velocity that you can animate coordinates and saw the examples, however when I try using it inside of a polygon nothing happens.

I tried changing all the points into the same one as an example to confirm my logic. And if my logic serves me correctly all the polygons should animate into one point! But nothing happens.

What am I doing wrong? This is the code I have:

<script>
    function fetchXML(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function (evt) {
    //Do not explicitly handle errors, those should be
    //visible via console output in the browser.
    if (xhr.readyState === 4) {
        callback(xhr.responseXML);
    }
    };
    xhr.send(null);
};

/*var list = ["test3.svg","test.2svg"];*/
//fetch the document
fetchXML("test3.svg",function(newSVGDoc){
    //import it into the current DOM
    var n = document.importNode(newSVGDoc.documentElement,true);
    document.getElementById("avengers").appendChild(n);

    var ironman = document.getElementsByTagName("polygon");

    var ironmanlist = Array.prototype.slice.call(ironman);
        /*alert(ironmanlist.length);*/
        ironmanlist.forEach(function(elem,i)
        {   
            for (var index = 0; index < elem.points.length; ++index){
                console.log(elem.points[index]);
                $.Velocity(elem.points[index],{x:100,y:100},{duration:Math.floor(Math.random() * (3000 - 1000 + 1)) + 1000}, "ease-in-out");
                console.log(elem.points[index]);
            }

            /*console.log(elem.points[0].x);
            $.Velocity(elem,{translateX:-200},{duration:Math.floor(Math.random() * (3000 - 1000 + 1)) + 1000}, "ease-in-out");*/
            /*console.log(elem.points[0].x);*/
        }
        );
        console.log(ironmanlist);


}); 
</script>

Can velocity.js animate points inside a polygon tag

0 Answers0