Html <；a>；Safari中SVG路径转换的链接中断

我有一个正常的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>

这适用于所有浏览器

但现在我想在同一个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内部的故障吗

这是我的问题，我在JS中创建了一个“假链接”对象，在任何情况下都可以使用。然后，我可以将“.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>

此处为内联SVG内容

如果使用

Yes，则在锚定标记中封装内联SVG时，转换将中断。这是webkit浏览器中的一个有文档记录的错误，可能还有其他错误。我已经在几个项目中体验过了。解决这个问题的一种方法是将其包装在一个文件中，并使用JS来伪造一个href action。这里有一个相关的线程：但我还没有让嵌入的链接起作用。再一次，让JS劫持对元素的点击是我最好的解决方案。这些是我需要的答案，谢谢！请参考我在这里的答案
<span class="fake-link" data-href="/about">
  <svg>
    INLINE SVG CONTENT HERE
  </svg>
</span>

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

})