jquery - manipulation - svg drawing animation

Animación SVG de limpieza radial utilizando CSS3/JS

Question

¿Cómo puedo lograr una animación de limpieza radial en CSS3 o JS? Parece tan simple pero no puedo entenderlo.

Answer 1

Aquí hay una forma básica de hacerlo usando jQuery. Puede haber complementos disponibles que simplifiquen esto.

Demostración de JSFiddle

HTML

<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<!-- 0 degrees arc -->
<path d="M100,100 v-100 a100,100 0 0,1 0,0 z"
id="circle-wipe" fill="#999" stroke-width="0" />
</svg>

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);

Ver también:

• Ruta SVG (w3schools.com)
• Rutas (w3.org)