SVG Fill Transitions in WP

[Noel Forte]

Hi,

I’m trying to set up a transition for SVG fills, but it doesn’t seem to be working. I can get the svg working and performing the transition properly on CodePen, but not on my localhost.

EDIT: I’ve tested a reduced test case on a live and local server running in just a single HTML file. Yet when I integrate the rules into my WordPress install it stops working. I’m going to play with it a bit more.

http://codepen.io/thenoelforte/pen/ryljg

Is there something I’m missing?

[Paulie_D]

Nothing wrong with the HTML/CSS as far as I can see.

As you say it’s not working in WP, I’m inclined to think it’s more related to that environment so I’ll push this over to the relevant section.

[bmoneruiux]

I’m having the same issue, but with jQuery not controlling the SVG anymore once integrated into WP. If you find a solution, fire a message off to me.

[Noel Forte]

Right. I’ve done some poking around and discovered some weird behavior when it comes to <a> tags and SVG’s. It seems that there’s an issue with the SVG’s transitions on fills depending on the type of URL being used. Sometimes the transition only fires on https URL’s sometimes non-https URL’s and sometimes on neither and sometimes on both.

Here’s a link to what I’m seeing on my end: http://imgur.com/jkB6EYP

http://codepen.io/thenoelforte/pen/ryljg

[bmoneruiux]

Well this is very interesting. Same behavior as this. What happens when you use just /?

I’ve also found out that this odd behavior is only happening in Chrome and Safari. Everything else renders it fine (haven’t tried IE).

[Noel Forte]

If you mean <a href="/">...</a>, then you get the same behavior that you get when using #. For some reason this bug has something to do with SVG’s and http links.

[bmoneruiux]

Chris Hass over on STack Overflow linked me to this post:

http://stackoverflow.com/questions/19500903/svg-css3-transition-on-fill-not-working-when-there-is-external-link

Interesting read for sure.

[Author]

Posts