Snap.svg

by Lore ZZ

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<svg id="mysvg" width="400" height="500">
    <circle id="circle1" cx="100" cy="100" r="20"/>
    <circle id="circle2" cx="100" cy="200" r="20"/>
</svg>

JavaScript

s = Snap("#mysvg");



var circleFromDom1 = Snap("#circle1");
console.log('circleFromDom1', circleFromDom1);
circleFromDom1.animate({ fill: 'blue' }, 2000);

var circleFromDom2 = Snap.select("#circle2");
console.log('circleFromDom2', circleFromDom2);
circleFromDom2.animate({ fill: 'red' }, 2000);

var circle3 = s.circle(100,300,20)
         .animate({ fill: 'yellow' }, 2000);

var circle4 = s.circle(100,400,20).attr({ id: 'circle4' });

s.select("#circle4").animate({ fill: 'green' }, 2000);