морфинг с Velocity.js не работает

у меня есть этот plunker: http://plnkr.co/edit/bKzi6rU3lIXT4Nz2wkR8?p=info

<!DOCTYPE html> 

<head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" type="text/css" href="stilovi/main.css"> 
    <title>Testing</title> 
</head> 

<body> 
    <div id="avengers"></div> 
</body> 
<script src="snap.svg-min.js"></script> 
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
<script src="https://rawgit.com/julianshapiro/velocity/master/velocity.min.js"></script> 
<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){ 
        //2.test case morphing each point (not working)// 
        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"); 
        //3.test case morphing each point in another way (not working)// 
        /*$(elem.points[index]) 
         .velocity({x:100,y:100},{duration:Math.floor(Math.random() * (3000 - 1000 + 1)) + 1000}, "ease-in-out"); 
        console.log(elem.points[index]); 
       }*/ 
     //1. working test case (translation)// 
     console.log(elem.points[0].x); 
     $.Velocity(elem, { 
     translateX: -300 
     }, { 
     duration: Math.floor(Math.random() * (3000 - 1000 + 1)) + 1000 
     }, "ease-in-out"); 
     //$.Velocity(elem,{rotateZ:"45deg"},{duration:Math.floor(Math.random() * (3000 - 1000 + 1)) + 1000}, "ease-in-out"); 
     console.log(elem.points[0].x); 
     //End of 1. working test case// 
    }); 
    console.log(ironmanlist); 


    }); 
</script> 

</html>

С моим кодом, и некоторые примеры. То, что я хочу сделать, это преобразовать каждый многоугольник из одного изображения SVG в другой многоугольник из другого изображения SVG. Перевод работает, но я не уверен, как сделать морф. Может ли кто-нибудь помочь или проверить код и рассказать мне, что я делаю неправильно? Существует много полигонов, и мне нужно, чтобы это было быстро, поэтому я пошел с speed.js для этого.

Я также думал о том, что, возможно, переместил все это на three.js и, возможно, преобразовал его в формат, который лучше всего использовать с тэгом. Но если это возможность использовать его как svg и сохранить отличную производительность, я бы сделал это.

источник

2015-11-26 Ivan Horvatin