- September 1, 2017 at 9:11 am #1323039
Hello. I am trying to get a simple CSS mouse over animation to work with an SVG file, but it is not working as expected.
I have some simple SVG code that I have saved as an SVG file. I uploaded this file to WordPress and added it to my page via the visual editor–the SVG image displays on the front-end without issue. But when I then add a simple mouse over animation to the SVG code, save the SVG file, upload the new SVG file to WordPress, and add the new SVG image to my WP page, the mouse over animation does not occur as expected. How can I troubleshoot this? See below for the code in-question. Here is the page in-question.
Something curious is that if I add the SVG code as inline code to the WordPress text editor, the mouse over effect does work as expected (page here).
–I have tried adding the image to the page via the PHP template in-question, but that did not work either–the image displayed, but the mouse over effect was still missing.
–There are no PHP or JS console errrors.
–Here is a pastebin with the SVG code in-question.
Do you know why this is occurring?
September 4, 2017 at 7:11 am #1323404
- This topic was modified 2 months, 3 weeks ago by cagross.
WordPress has killed support for SVG file for security reason also if you inspect your code they are turned into img tag.
Animation on SVG linked with img tag usually doesn’t work. It worked for me on the first load with chrome. This is the bug with most browsers.
You should try embedding it with object tag. It might work.
ThemeGrill Support TeamSeptember 4, 2017 at 1:24 pm #1323445
Have you tried with a plugin?
https://wordpress.org/plugins/scalable-vector-graphics-svg/September 8, 2017 at 5:40 am #1323944
You must be logged in to reply to this topic.