当存在外部链接时，SVG css3过渡填充不起作用

我遇到类似如下问题：here。当存在外部链接时，SVG css3过渡填充不起作用

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

目前，改变链接到一个内部页面，使CSS3过渡的工作，但有其链接到一个外部（http：//）覆盖了我所做的css3转换。

如果任何人有解决此问题或已经处理过此之前。请帮忙！

谢谢！编号：忘记了！ JFIDDLE LINK

来源

2013-10-21 user1070034

你能可能做出的jsfiddle这个？ – aug

奇怪的是，即使我在内部链接淡入淡出只是第一次点击（目标=“_ blank”），然后链接恢复到正常的悬停没有过渡。 – user1070034

Sry！增加了JsFiddle链接！谢谢 – user1070034

这实际上是与访问状态有关的事情。其他评论者说它有效的原因是因为他们以前没有访问过你的网页。一旦他们有了它将不再有效。我试过在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]; 
});

来源

2013-11-28 12:03:35 Jamie

如果我们只能找到一个非hacky的解决方法...或者只有webkit团队会跳过它！ –

但是我越想越想，这是一个天才解决方法！（我用当前时间 - 小时，分钟，秒，日，月 - 作为我的“随机查询字符串”。） –

感谢@JoelFarris！这似乎现在在btw中修正了Chrome。 – Jamie

我有点晚了这样的回答，但以防万一它可能会帮助别人谁这个网页上结束了，这个问题似乎从know Chrome bug (101245)导致。基本上，一旦链接被访问，转换停止工作。

因此，要解决此问题，假设您不想等待错误得到修复，那么您需要使用一种策略，使浏览器认为链接未被访问。

来源

2014-04-09 02:00:53 Toglefritz

它实际上是[103354]（https://code.google.com/p/chromium/issues/detail?id=103354），似乎标记为close d自2012年以来...回归我猜。 – Jamie

在编写本文时至少在Safari和IE 11中仍存在bug，但使用currentColor来填充SVG似乎可以解决它！

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

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

来源

2016-08-10 12:47:20

令人惊叹！谢谢@Joel – Jamie

我只是改变了锚成一个div和附加的数据属性，它包含的网址：

<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和追加到位置对象：

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

来源

2017-04-17 15:06:33

当存在外部链接时，SVG css3过渡填充不起作用

回答

相关问题