<a>链路发生在Safari SVG路径转换

我有一个正常的SVG三角是这样的：<a>链路发生在Safari SVG路径转换

<svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <polygon id="triangle" fill="#000000" points="100 0 200 200 0 200 "></polygon> 
</svg>

我使用CSS来平稳过渡的SVG的颜色，当有人悬停在：

#triangle { transition: 1s; } 

svg:hover #triangle { fill: orange; }

这适用于所有浏览器。

但现在我想点击链接功能添加到同一SVG，所以我围绕它的链接标签：

<a href="http://google.com"> 
    <svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <polygon id="triangle" fill="#000000" points="100 0 200 200 0 200 "></polygon> 
    </svg> 
</a>

在Safari

但现在我的平滑的色彩过渡休息。我的SVG路径现在瞬间改变颜色，而不是我原来的第二种颜色过渡。

这不会发生在Firefox或Chrome中。

这是Safari中的故障吗？

这是我在Codepen http://codepen.io/TimArt/pen/lgLEp

来源

2014-09-22 Tim Arterbury

是的，当您将内联SVG包装到锚标记中时，转换会中断。这是webkit浏览器中记录的错误，也可能是其他错误。我已经在几个项目中体验过它。解决此问题的一种方法是将其包装在中并使用JS来伪造href操作 – Alex 2014-09-22 23:22:50

这是一个相关的线程：http://stackoverflow.com/questions/16846628/svg-css3-animation-not-working-with链接标记，但我没有得到嵌入式链接工作。再次，让JS劫持单击元素是我最好的解决方案。 – Alex 2014-09-22 23:24:15

这些是我需要的答案，谢谢！ – 2014-09-24 23:24:32

问题，我创建JS“假链接”对象使用时是这种情况。然后，我可以将'.fake-link'附加到任何HTML元素，以复制标准标签<a>。

的JS：

/** 
* Link namespace 
*/ 
Link = function() { 
}; 

/** 
* Fake a link 
*/ 
Link.prototype.openLink = function(el) { 
    var link = $(el).attr('data-href'); 
    var win = null; 
    win = window.open(link, '_self'); 
    win.focus(); 
}; 

window.Link = new Link(); 

$(function(){ 
    $(document).on('click', '.fake-link', function(e) { 
     e.stopPropagation(); 
     window.Link.openLink($(this)); 
     return false; 
    }); 
});

一些HTML：

<span class="fake-link" data-href="/about"> 
    <svg> 
    INLINE SVG CONTENT HERE 
    </svg> 
</span>

来源

2014-09-22 23:27:33 Alex

如果使用<a xmlns:xlink="" data-href="URL"的转换将在Safari/WebKit的浏览器。您仍然需要JavaScript来使链接正常工作。因此，对于jQuery也使用此代码：

$('#Element').click(function(e) {  
    location.href = $(this).attr('data-href'); 
    e.preventDefault(); 

})

来源

2014-11-21 16:52:49 Kieran

<a>链路发生在Safari SVG路径转换

回答

相关问题