Drawing path animation with Snap.svg

Denis Langevin

unread,

Oct 25, 2016, 11:36:02 AM10/25/16

to Snapsvg

Hi everyone,

I've built an svg logo animation using CSS and it works fine... see this jsfiddle (note that in the original project the svg file is external from HTML and called in using snap but for you to see it work, I pasted the entire svg in the fiddle HTML window).

Like I said, it works fine... in Google Chrome and Firefox but it doesn't in Internet explorer nor in Safari browsers. So I thought it would probably work in all browsers if using Snap.svg scripting and I reach out to you for help. Sinc I'm new to this an starting to lurn, could someone please take my svg in the posted fiddle's HTML, scrap the CSS part and reproduce this animation with a Snap.svg code in the JavScript window?

Thank you very much in advance for your precious help! :)

Best regards,

Denis.

Denis Langevin

unread,

Oct 25, 2016, 12:55:33 PM10/25/16

to Snapsvg

P.S. I tried a code I've found on the Net but it doesn't work... must be missing something.

            var logo = Snap("#LogoEN");
            
            Snap.load("logoEN.svg", function(data) {
                logo.append(data);
            });
            
var yourElement = s.select('#eGrisContour');
var pathLength = yourElement.getTotalLength();
yourElement.attr({
    'stroke-dasharray': '' + pathLength + ' 0'
});
Snap.animate(0, pathLength, function(t){
    yourElement.attr({'stroke-dasharray': '' + t + ' ' + (pathLength - t)});
}, 10000);

Ian

unread,

Oct 25, 2016, 2:44:51 PM10/25/16

to Snapsvg

I'm just running out the door, but at a quick glance, are you sure your s.select (and the rest of the code), shouldn't be inside the callback after your load ?

If you are loading and manipulating, make sure you only manipulate after the load has finished. That may not be the case here, just I'm guessing looking at your structure of load and select. If so, make a function to do the select and dasharray animation. And then call that function after logo.append(data).

Denis Langevin

unread,

Oct 26, 2016, 4:00:22 PM10/26/16

to Snapsvg

Hi Ian,

Could you please provide me with an example with my code?

I've tried (most likely like an amateur) to move my code inside the load code (see under) but it does not work.

<script>

            var logo = Snap("#LogoEN");
            
            Snap.load("logoEN.svg", function(data) {
                logo.append(data);

var yourElement = s.select('#eGrisContour');
var pathLength = yourElement.getTotalLength();
yourElement.attr({
    'stroke-dasharray': '' + pathLength + ' 0'
});
Snap.animate(0, pathLength, function(t){
    yourElement.attr({'stroke-dasharray': '' + t + ' ' + (pathLength - t)});
}, 10000);

            });
        </script>

And also, now for the building of the script I'm having it in the HTML page but ideally, I would like to put it in an external js file and call it in the HTML page. Is it possible?

Ian

unread,

Oct 26, 2016, 4:04:51 PM10/26/16

to Snapsvg

Do you have the logoEn.svg file ?

Denis Langevin

unread,

Oct 26, 2016, 4:25:41 PM10/26/16

to Snapsvg

Here you go... attached.

And the end game is to reproduce the CSS animation in my jsfiddle that I've posted first.

Thank you very much for your help Ian. :)

logoEN.svg

Ian

unread,

Oct 27, 2016, 7:11:56 AM10/27/16

to Snapsvg

There's a few problems here, and not quite sure if you can do what you want, first the bug fix...

You use 'logo' and 's' to refer to the Snap paper. Stick to one of them, as 's' is undefined in the example and should be 'logo'. (Always check the console for errors)

You are trying to animate the line of a 'group' element, ie 'eGGrisCountour'. So this makes no sense, as a group element doesn't have a 'line' or 'stroke'.

So you need to isolate a path to animate, and possibly give one an id which you can select, and then play.

Maybe start off with just a simple path, get that working, and then figure out if and how that will apply to an element in the svg.

Message has been deleted

Denis Langevin

unread,

Oct 27, 2016, 9:42:29 AM10/27/16

to Snapsvg

Hi Ian,

Here is a version of my svg where I've ungroup my path and applied the "eGrisContour" id to it instead of the group. (don't know why I've put these in an unnecessary group in the first place! :D )

And with that, I've tried this code to animate the "drawing" of the reversed "E" letter (like I did in CSS here) but with no success. :(

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Logo Éditions Nordiques v1</title>
        <script src="scripts/snap.svg-min.js"></script>
        <style>
        
        #eGris {
    opacity: 0;
}
        
        </style>
    </head>
    <body>
        <div id="LogoEN"></div>

        
        <script>
            var logo = Snap("#LogoEN");
            
            Snap.load("logoEN.svg", function(data) {
                logo.append(data);

var yourElement = logo.select('#eGrisContour');

var pathLength = yourElement.getTotalLength();
yourElement.attr({
    'stroke-dasharray': '' + pathLength + ' 0'
});
Snap.animate(0, pathLength, function(t){
    yourElement.attr({'stroke-dasharray': '' + t + ' ' + (pathLength - t)});
}, 10000);
            });

        </script>

    </body>
</html>

I really need some guidance and example to learn this correctly. :\

Can you stitch a working example with my revised svg and show me in a fiddle please?

Thank you very much for your help and patience. :)

logoEN.svg

Ian

unread,

Oct 27, 2016, 10:02:54 AM10/27/16

to Snapsvg

#logoEN must be an svg element, not a div element, as Snap uses svg.

getTotalLength is a path method, so you must use a path rather than a polygon (I think).

Denis Langevin

unread,

Oct 27, 2016, 1:44:12 PM10/27/16

to Snapsvg

For the #logoEN, no problem, I can put svg instead of a div...

for the getTotalLength, maybe work the code without fetching the paths total length? Because as I did in the CSS version, I've determined that the path for #eGrisContour is 1325. See CSS bellow...

#eGrisContour {
  stroke-dasharray: 1325;
  stroke-dashoffset: 1325;
  animation: dash 1.5s ease-out forwards;
}

So how would you wright this down?

Denis Langevin

unread,

Nov 17, 2016, 8:26:46 AM11/17/16

to Snapsvg

Any update on my last question Ian? :)

Ian

unread,

Nov 17, 2016, 8:29:49 AM11/17/16

to Snapsvg

Post up your latest jsfiddle and specify the bit that isn't working, it's tricky to see at a glance where you are with it.

Reply all

Reply to author

Forward