当有外部链接时，SVG css3过渡填充不起作用 [英] SVG css3 transition on fill not working when there is external link

问题描述

我遇到类似这样的问题：此处。

I have a problem similar to this one : here.

唯一的区别是我想要链接SVG的页面是一个外部页面，意思是： http://www.google.ca

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

目前在我的代码中，将链接更改为内部页面会使css3过渡工作，但将其链接到外部（http：//）会覆盖我所做的css3过渡。

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

如果有人有解决方法这个问题或处理过这个问题之前。请帮忙！

If anyone has a workaround this issue or has dealt with this before. Please help!

谢谢！

    code

编辑：
忘了！
JFIDDLE LINK

推荐答案

这实际上与访问状态有关。其他评论者说它有效的原因是因为他们之前没有去过你的网页。一旦他们拥有它将不再有效。我已经尝试在CSS中添加访问状态，但没有区别。

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）？>>我的链接< / a>

大多数网站都会忽略他们没有的查询认识到应该没问题。或者更好的方法是在点击时用JS删除它。

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];
});

这篇关于当有外部链接时，SVG css3过渡填充不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！