Animation does not display as expected
-
Hello. I have created an SVG file with a simple mouse over animation ( it reduces the opacity of the image to zero, making it disappear). I have your plugin activated, and have imported the SVG file into WordPress. But I am having issues with the mouse over animation.
If I directly access the file via its URL (link here), the mouse over animation displays as expected. But when I add the image to my WordPress the page via the WP editor, the image is displayed, but the mouse over animation does not function as expected (page here) (the only mouse over animation that occurs is the small opacity change that is part of my theme’s default behavior). I was under the impression your plugin would allow this animation to function as expected in this manner. Perhaps I am misunderstanding something?
I’ve also tried to add the mouse over animation via another method–by with custom CSS (in my style.css file). But that doesn’t seem to work either. In my SVG file I’ve given the element an ID, which I’ve tried to use as a selector in style.css. But using Inspect Element, I don’t see that the element possesses the ID in-question.
FYI I have added the image to the page via the following tag:
<a href="http://kabultec.org/dev/wp-content/uploads/2017/10/test-with.svg"><img class="style-svg alignleft size-full wp-image-1366" src="http://kabultec.org/dev/wp-content/uploads/2017/10/test-with.svg" alt="" /></a>Thanks in advance.
The page I need help with: [log in to see the link]
-
Thanks for the reply.
I tried embedding the image using the simple
tag you suggested. But I had the same issue. You can see that new image on the same page (page here)–I added it after the original image.
>> It looks like the theme you’re using is injecting a bunch of extra code… and the SVG is not rendered inline, so any styles you have in it, will not be used.
I see that there is extra code. But why do you say it is from my theme? As a test, I switched to the default Twenty Seventeen theme, but I had the same issue.
Thanks!
That should totally work.
Maybe if you could try deactivating all other plugins and using the twentyseventeen theme, then paste in the code I provided. If it still has an issue, there might be something going on at the hosting level.I thought the theme may be injecting extra image code, but I can’t be sure where it’s coming from to be honest.
OK I switched to the Twenty-Seventeen theme and deactivated all plugins, but I’m still seeing the same issue: the <SVG> tag is still not appearing–only an
tag (page here).
Thoughts?
There is nothing recorded in debug.log.
>> I can see that my plugin hasn’t loaded in the console.
My mistake. I had forgotten to keep your plugin activated :-/ But, I just activated it, and am experiencing the same issue. Test on your end again? In the meantime, I’ll send those admin creds.
edit:
>> I can see some other SVG files that are actually rendered inline including social icons… Not sure where they are coming from.
This is interesting. If the issue was at the server level, I wouldn’t expect these SVG files to come through. Unless they’re rendered onto the page via a different method.
The topic ‘Animation does not display as expected’ is closed to new replies.
