5

我有一个与此类似的问题：here。

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

目前在我的代码中，将链接更改为内部页面会使 css3 转换工作，但让它链接到外部 (http://) 会覆盖我所做的 css3 转换。

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

谢谢！

    code

编辑：忘记了！ JFIDDLE 链接

4

4 回答 4

11

这实际上与访问状态有关。其他评论者说它有效的原因是因为他们以前没有访问过您的页面。一旦他们拥有，它将不再起作用。我尝试在 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-28T12:03:35.687 回答
4

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

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

<svg><path fill="currentColor"/></svg>
于 2016-08-10T12:47:20.670 回答
3

我对这个答案有点晚了，但以防万一它可能会帮助其他最终访问此页面的人，这个问题似乎是由一个已知​​的 Chrome 错误 (101245)引起的。基本上，一旦访问链接，转换就会停止工作。

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

于 2014-04-09T02:00:53.720 回答
0

我只是将锚点更改为 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 并将其附加到位置对象：

document.getElementById("homeLink").addEventListener('click',function(){
    var url = this.getAttribute('data-url');
    window.location.href = url;
},false);
于 2017-04-17T15:06:33.243 回答