链接在Safari中破坏了SVG路径转换

Question

我有一个普通的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

- Tim Arterbury

---

是的，当你把一个内联 SVG 放在锚标签中时，过渡效果会失效。这是 Webkit 浏览器中已记录的 bug，也可能存在于其他浏览器中。我已经在几个项目中遇到过这个问题。解决方案之一是将其包在一个 <span> 中，并使用 JS 模拟 href 动作。 - Alex

这里有一个相关的线程: https://dev59.com/dXLYa4cB1Zd3GeqPbMD4，但我还没有让嵌入式链接起作用。同样，使用JS劫持元素上的点击事件是我的最佳解决方案。 - Alex

那些是我需要的答案，谢谢！ - Tim Arterbury

请参考我在此处的答案：https://dev59.com/a33aa4cB1Zd3GeqPjuxa#38597944 - James Trenda

Answer 1

我可以在JS中创建一个“fake-link”对象，以便在这种情况下使用。然后，我可以将“.fake-link”附加到任何HTML元素上，以复制您的标准标签。

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>

- Alex

Answer 2

如果您使用<a xmlns:xlink="" data-href="URL"，转换效果将在Safari/Webkit浏览器中起作用。但是，您仍需要JavaScript使链接正常工作。因此，对于jQuery，请使用以下代码：

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

})

- Kieran