Geek Answers Handbook

SVG css3 transition when filling does not work when there is an external link

I have a problem like this: here .

The only difference is that the page I want to link SVG to is the external link of the page: http://www.google.ca

Currently, in my code, changing the link to the internal page makes the css3 transition, but binding to the external (http: //) overrides the css3 transition I made.

If someone has a workaround for this problem or has dealt with it before. Please, help!

Thanks!

    code

EDIT: Forgot! JFIDDLE LINK

+4
source share
4 answers

- . , , , , . , . CSS, .

, , - URL-, , :

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

, , . JS .

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

, , , Chrome (101245). , .

, , , , , , .

+3

- , , Safari IE 11 , currentColor SVG, , !

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

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

div , 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>

JavaScript, URL- location:

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

More articles:


All Articles