<!DOCTYPE html>
<html>
<head>
<title>svg circle animation</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#XMLID_4_{
stroke-dasharray: 1000;
stroke-dashoffset: 2000;
fill: #FFFFFF;
stroke: #000000;
}
svg:hover #XMLID_4_{
-webkit-animation: draw 3s forwards;
animation: draw 3s;
}
@keyframes draw{
from{
stroke-dashoffset: 1000;
fill:#efefef;
stroke:#ff5535;
}
to{
stroke-dashoffset: 0;
}
}
@-webkit-keyframes draw{
from{
stroke:#ff5535;
stroke-dashoffset: 1000;
}
to{
stroke-dashoffset: 0;
}
}
</style>
</head>
<body>
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<g>
<circle id="XMLID_4_" stroke-width="3" stroke-miterlimit="10" cx="366.5" cy="135.6" r="44.7"/>
</g>
</svg>
</body>
</html>
与您在CSS3寻找效果
相关的问题:http://stackoverflow.com/a/24486333/1811992 [CSS3微调的 – 2014-10-03 11:30:19
可能重复,preloader](http://stackoverflow.com/questions/24484727/css3-spinner-preloader) – 2014-10-03 11:43:55
对于纯粹的svg解决方案:你可以通过动画'stroke-dashoffset',http:// xn-- dahlstrm-t4a.net/svg/path/piecharts.html就是一个例子。 – 2014-10-03 15:43:53