Hi @drahcirj,
Firstly, thanks for your interest in my plugin and that is a cool SVG you have there 🙂
It looks to me like the JS is not firing at the right time.
The SVG is infact rendered inline, but the script to animate it is not affecting it for some reason.
This is a little outside what I really know about JS, but I would think that if you separated the JS and enqueued it to run based on the inline SVG being rendered, it should work.
Once the SVG is rendered inline, they are given unique classes for targeting and triggering these sorts of things.
So my plugin is doing it’s job, you just need to figure out how/when to fire the JS to make it work in this context. When it is opened in a browser itself, yes, that is all that needs to be loaded so it works, but with WordPress, there is a ton of other things going on also.
I hope this helps.
🙁 I don’t want to start altering other people’s SVG Javascript code and pulling apart SVGs, that’s much too hard. It also means you can’t drag and drop SVGs into your pages – you have to manually alter the JS on the page every time. I just want to use animations I find on the web. As SVG becomes more widely supported, more and more animations will start being used.
Is your plugin on GitHub? Maybe when I have some spare time I could look into this. I’d really like to be able to use vector animations in WordPress over MPGs and GIFs.
I get what you’re saying, but the SVG you’re using with JS embedded in it is not ideal and you should load script separately. This one is utilizing the XML aspect of it which is cool, but you can run into these issues when embedding in WordPress.
It really wouldn’t be that hard to strip the SVG to just visual components and then putting the JS separately.
This plugin is not on github, but you can download any version of it from the developers page on the WordPress.org repo.
Since this is something outside the scope of my plugin, I should mark it as resolved for now, but I will keep your use case in mind and the thread open while I see if there is some way to make sure the JS is run at the correct time without pulling it out of the SVG file itself. I’m not super hopeful at this point, but you never know 🙂
Thanks. Some additional info. The problem seems to be that your plugin loads SVGs without SSL *gasp*. It might not be a JS problem after all.
Hmmmm, It should be loading them relative to the site you’re using… I haven’t come across this issue before.
I will have more of a play around as soon as possible. I’m actually in hospital with a broken leg and ribs at the moment, but should be able to look into this more soon.
Upon checking, it should upload to your media library as https if you are using it properly. Then it should load the SVG via https.
Have a look what the URL in the media library says it is.
Aha, I changed my site URL to https:// (since Let’s Encrypt is recent and I wasn’t using SSL last year). That fixed the browser errors.
I see also that plain SVG animation (no JS) works fine: https://richardcooke.info/how-to-create-animated-svgs-and-display-them-in-wordpress/. So that’s halfway there 🙂
—–
But JS in SVG is stripped by your plugin before the SVG is rendered if you use class='style-svg. And if you don’t use that class then a static img is displayed (the clock). Neither enables animation.
If you view the clock in its own page from my site it works fine: https://richardcooke.info/wp-content/uploads/2017/01/clock.svg
Can you not make your plugin show SVGs not inline, but simply as <objects> or <imgs> pointing to the real SVG file, without stripping JS?
—-
PS. Very sorry to hear about your accident. Hope I’m keeping you entertained 😛
Ah, final word – SMIL (SVG animation language) is not supported by IE / Edge and will be removed by Chrome in future.
It’s officially recommended that all SVG animation is done by external CSS or Javscript.
Blog post about it: https://www.elegantthemes.com/blog/resources/how-to-create-an-animated-logo-with-svg-and-css
So there is no reason to have this plugin support animation code inside the SVG itself. This issue can be closed completely.
Hey,
I’m really glad you found that info 🙂
I never planned on supporting it within the SVG file itself.
Although the plugin doesn’t strip it out, it is there, it just doesn’t run correctly from there.
Thanks for posting the link to that article, it is definitely a much better idea to enqueue the CSS/JS separately.
Thanks for your support!
