var snapA = Snap("#svg");
jQuery(document).ready(function() {
var home_graphAnimation = {
drawsvgline: function(data,i, color, callback) {
var i2 = i+1;
var circle1 = snapA.circle(data[i].x , data[i].y ,5);
circle1.attr({
stroke: color,
fill: color,
});
var pathA = snapA.path("M "+data[i].x +" "+ data[i].y + " L " + data[i2].x + " " + data[i2].y);
var lenA = pathA.getTotalLength();
pathA.attr({
stroke: color,
strokeWidth: 4,
fill: 'none',
// Draw Path
"stroke-dasharray": lenA + " " + lenA,
"stroke-dashoffset": lenA
}).animate({"stroke-dashoffset": 0}, 100,mina.linear,function(){
var circle2 = snapA.circle(data[i2].x , data[i2].y ,5);
circle2.attr({
stroke: color,
fill: color,
});
if (data[i2+1]) {
home_graphAnimation.drawsvgline(data,i+1,color,callback);
}
if (i2+1 == data.length) {
console.log("Callback Executed");
if(typeof callback == 'function') {
callback(data);
return;
}
}
});
},
drawVerticalLine: function(){
var getPath = snapA.path('M958 420 l0 -320');
var pathLength = getPath.getTotalLength();
var perc = 0;
var dotLength = 10;
var gapLength = 10;
getPath.attr({
stroke: '#000',
strokeWidth: 2,
strokeDasharray: 0,
strokeDashoffset: 0,
});
function verticalDashLine(){
perc +=1;
if(perc>100){
perc = 100;
}
var visibleLength = pathLength*perc/100;
var drawnLength = 0;
var cssValue = '';
while(drawnLength < visibleLength){
drawnLength += dotLength;
if(drawnLength < visibleLength){
cssValue += dotLength+ ' ';
drawnLength += gapLength;
if(drawnLength < visibleLength){
cssValue += gapLength+ ' ';
}
}else{
cssValue += (visibleLength + dotLength - drawnLength)+ ' ';
}
}
cssValue += pathLength;
if(perc<100){
setTimeout(verticalDashLine, 10);
}
// console.log(cssValue);
getPath.attr({
strokeDasharray: cssValue
});
if(perc==100){
console.log("Complete");
verticalDashLineAfter();
}
}
function verticalDashLineAfter() {
// DRAW Circle after dash line animation
var circleRound = snapA.circle(958 ,100 ,5);
circleRound.attr({
stroke: '#000',
strokeWidth: 2,
fill: 'none'
});
// DRAW Line After Circle
var lineAfterCircle = snapA.path("M 965 100 l 80 0");
var lineAfterCircle_len = lineAfterCircle.getTotalLength();
lineAfterCircle.attr({
stroke: '#000',
strokeWidth: 2,
fill: 'none',
"stroke-dasharray": lineAfterCircle_len + " " + lineAfterCircle_len,
"stroke-dashoffset": lineAfterCircle_len
}).animate({"stroke-dashoffset": 0}, 500,mina.easeinout,function(){
var text1 = snapA.text(1060 ,108 ,"INNOVATION");
text1.attr({
"fill" : "#000",
"class" : "invoer-text"
});
});
}
verticalDashLine();
}
}
var data = [{"x":15,"y":181},{"x":116,"y":153},{"x":217,"y":230},{"x":321,"y":174},{"x":429,"y":225},{"x":537,"y":217},{"x":644,"y":192},{"x":747,"y":166},{"x":852,"y":157},{"x":958,"y":180},{"x":1060,"y":303},{"x":1159,"y":402},{"x":1264,"y":404},{"x":1367,"y":392},{"x":1475,"y":377},{"x":1579,"y":419},{"x":1686,"y":410},{"x":1789,"y":418},{"x":1899,"y":407}]
var data1 = [{"x":6,"y":305},{"x":102,"y":289},{"x":213,"y":271},{"x":318,"y":310},{"x":426,"y":317},{"x":528,"y":308},{"x":637,"y":266},{"x":740,"y":258},{"x":845,"y":319},{"x":958,"y":347},{"x":1054,"y":261},{"x":1162,"y":242},{"x":1267,"y":219},{"x":1369,"y":211},{"x":1480,"y":254},{"x":1584,"y":204},{"x":1689,"y":234},{"x":1793,"y":223},{"x":1897,"y":194}];
home_graphAnimation.drawsvgline(data,0, "#F6A85A",function(data){
// Callback Draw Second Graph after Drawing first Graph
home_graphAnimation.drawsvgline(data1,0, "#5DBEB7",function(data){
// Callback Draw Verticla Line Animation After Drawing Second Graph
home_graphAnimation.drawVerticalLine();
});
});
}); //END Document Ready
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<svg id="svg" viewBox="0 0 1920 1080"></svg>
[使用jQuery/JavaScript的SVG路徑動畫（可能重複的HTTP ：//stackoverflow.com/questions/15238729/svg-path-animation-using-jquery-javascript） – 2013-03-11 08:46:01