使用CSS3 / JS进行SVG径向擦除动画

如何在CSS3或JS中实现径向擦除动画？ 它似乎很简单，但我无法弄清楚。

Answer 1

这是使用jQuery实现它的基本方法。 可能有可用的插件可以简化这一过程。

JSFiddle演示

HTML

CSS

 svg { width: 200px; height: 200px; } 

jQuery的

 // Utility function for drawing the circle arc function drawCircleArc(elem, angle) { var endAngleDeg = angle - 90; var endAngleRad = (endAngleDeg * Math.PI) / 180; var largeArcFlag = (angle < 180 ? '0' : '1'); var endX = Math.cos(endAngleRad) * 100; var endY = 100 + (Math.sin(endAngleRad) * 100); var data = 'M100,100 v-100 a100,100 0 ' + largeArcFlag + ',1 ' + endX + ',' + endY + ' z'; $(elem).attr('d', data); } // Code for running the animation var arcAngle = 0; // Starts at 0, ends at 360 var arcAngleBy = 10; // Degrees per frame var arcAngleDelay = 50; // Duration of each frame in msec function updateCircleWipe() { arcAngle += arcAngleBy; drawCircleArc('#circle-wipe', arcAngle); if (arcAngle < 360) { setTimeout(function(){ updateCircleWipe(); }, arcAngleDelay); } } setTimeout(function(){ updateCircleWipe(); }, arcAngleDelay); 

也可以看看：

• SVG路径 （w3schools.com）
• 路径 （w3.org）