Issue adding simple CSS animation to SVG image?

Home Forums Spacious Free Issue adding simple CSS animation to SVG image?


This topic contains 3 replies, has 3 voices, and was last updated by  cagross 9 months, 2 weeks ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #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).

    Of Note

    –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?


    • This topic was modified 9 months, 3 weeks ago by  cagross.

    Hi, 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.

    Best Regards
    Sanjeev Shrestha
    ThemeGrill Support Team




    @Wolfneo thanks for the suggestion–I’ll look into it.

    @sanjeev OK thanks for that. I’ll do some more troubleshooting to see why using the tag doesn’t work. Let’s consider this particular ticket resolved then.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.