Question

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

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

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

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

谢谢！

    code

编辑：忘记！ JFIDDLE LINK

Answer 1

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

我发现最简单的解决方案是只在网址中添加一个随机查询字符串，以便有效地访问该网页，例如：

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

Answer 2

我对此答案有点迟了，但为了防止其他人访问此页面，此问题似乎来自know Chrome bug (101245)。基本上，一旦访问链接，转换就会停止工作。

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

Answer 3

在撰写本文时，至少仍存在Safari和IE 11中的错误，但使用currentColor进行SVG的填充似乎可以修复它！

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

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

Answer 4

我刚刚将锚更改为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);

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

4 个答案: