SVG css3 transition on fill not working when there is external link

Question

I have a problem similar to this one : here.

Only difference is that the page I want to link the SVG to is an external page meaning : http://www.google.ca

C

Answer 1

This is actually something to do with the visited state. The reason the other commenters are saying it works is because they haven't been to your pages before. Once they have it will no longer work. I've tried adding visited states in the CSS and it makes no difference.

The easiest solution I've found is to just add a random query string to the url so the page is effectively not visited eg:

<a href="http:/mysite.com/?foo=<?php echo rand(0, 99999) ?>">My Link</a>

Most sites will ignore a query they don't recognise so that should be ok. Or better would be to remove it with JS on click.

$('body').on('click', 'a', function(e) {
    e.preventDefault();
    var url = $(this).prop('href');
    window.location.href = url.split("?")[0];
});

Answer 2

I am a bit late with this answer, but just in case it might help others who end up on this page, this issue appears to result from a know Chrome bug (101245). Basically, the transition stops working once the link is visited.

Therefore, to fix this issue, assuming you don't want to wait for the bug to be fixed, you will need to use a strategy that tricks the browser into thinking the link has not been visited.

Answer 3

I just changed the anchor into a div and appended a data attribute to it which contains the URL:

<div id="homeLink" data-url="http://www.homelink.com">
  <svg id="SVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 838.95 520"></svg>
</div>

Than I added some JavaScript to get the URL and to append it to the location object:

document.getElementById("homeLink").addEventListener('click',function(){
    var url = this.getAttribute('data-url');
    window.location.href = url;
},false);

Answer 4

The bug still exists in at least Safari and IE 11 as of this writing but using currentColor for the SVG’s fill seems to fix it!

http://codepen.io/jifarris/pen/RREapp

<svg><path fill="currentColor"/></svg>