So I’ve been using ember to build my site and so far I’m loving it. There’s one snag so far though. Every time I try to incorporate the animated icons(svg’s) project by Mary Lou, I keep getting no results for my efforts…
The project makes use of Snap.svg and is fairly straight forward. Currently, I’m using Brunch with Ember Reloaded although I’ve tried multiple other Ember generators to try and get this to work. I really love the generators for obvious reasons but if I have to hand code my Ember stuff to get Snap.svg and the animated icons to work properly then I’ll do so in a heartbeat.
My question is it even possible to use Snap.svg and Ember in this way? With my very newb knowledge I can’t see why it wouldn’t work but so far I haven’t been able to get the svg’s to display and animate… My console gives no errors and the only warnings are due to css vendor differences so I’m a bit clueless at this point.
Any input anyone has would be much appreciated… I can also upload the most recent version of my code if someone would like to review it to see if I’m doing something incorrectly. Right now it still has the static svg’s version that I have temporarily until I can figure out how to animate them, hopefully with Snap.svg.
Sure thing! This is my own personal site so it’s not a big deal or anything. It’s mainly for testing new web technologies I’m interested in… The svg for the “Web Development” section is the only one I’m currently trying to animate. All of the other svg’s are static and coded into the page.
If anything else is would help, just let me know. Thanks again
hmm, i suppose i could. The thing is I’m pretty sure my code to actually perform the animation as well as display the SVG is all from Mary Lou’s animated icons Snap.svg project: Animated SVG Icons with Snap.svg | Codrops
The only real “code” for me to do is something like this in my handlebars template:
The rest is simply making sure all the files are in the proper locations and that the config.js file BWER (Brunch with Ember Reloaded) uses has those files configured correctly…
More over since nothing is showing and it uses a custom Modernizr to serve up fallback content (a .png file) and since I’m already using the BWER’s version Modernizr… I’m unsure if it’s affecting my issue or perhaps is the cause of my issue.
… basically, I could setup a JSbin and can still do so but I really feel the issue has more to do with Ember, BWER and Snap.svg via Mary Lou’s animated icons project and how those technologies work together or do not work together and if all the proper config files are setup correctly. And since I’ve actually tried putting all the .svg’s in the same file location as the .js file trying to use it and setting the code to reflect such and the thing still not displaying at all much less animating… I dunnooooo. heheh but…
I’m not able to do anything right now but I can throw something up this evening if need be. Thanks again for your interest in helping. This isn’t a big issue but it has been bothering me for weeks now.
It looks like your jsfiddle example is incomplete. The tutorial you’re referring to has additional code that makes it work, specifically a library called ‘svgicons.js’. If you take a look at the tutorial’s example source, you have to explicitly call a method that creates an instance of an animated SVG icon ( new svgIcon( element, configuration [, options] ); ). The icons don’t instantiate themselves.
I’d suggest looking through the source of the tutorial and figuring out which pieces you’re missing. Good luck!
