Callback on multiple drawsvg elements

[danielucas]

I'm running .drawsvg within a .each loop to draw all the SVGs on my page, however when I try and use $(this) or any variable scoped within the .each, it does not work - my variables are not passing to the callback. Or rather, the LAST variable defined in the each (so my last item) is the variable that gets passed to ALL the callbacks.

For example, I have the letters: R E N - and every callback returns N in the console.log - instead of each returning the correctly scoped variable letter.

I've tried passing the variable through like callback: function(letter) - but this has no effect.

Help?

$('.logo-letter').each(function(){
var letter 	= 	$(this),
	thisSvg = 	$(this).find('svg'),
	mySvg 	= 	thisSvg.drawsvg({
			callback: function() {
						console.log($(this));
						letter.addClass('loaded');
					}
				});
	mySvg.drawsvg('animate');
});

[webkitten]

i have the same problem, is it solved?

[alive-vietnam-ti]

Does it still have this problem? 😢

[Nuhel]

I am also having this issue.

[Nuhel]

I am not sure if it is smart, But made it working in this way to loop all.

var svgs = [];
$('.animated__svg').each((index,element) => {
    var svg = $(element).drawsvg({
        duration: 2000,
    });
    svgs.push(svg);
});

animateSvg();
function animateSvg(){
    $.each(svgs,(index,element) => {
        element.drawsvg('animate');
    });
    setTimeout(function(){ animateSvg();}, 2000);
}