<a> 链接中断 Safari 中的 SVG 路径转换答案

【问题标题】：<a> link breaks SVG path transition in Safari<a> 链接中断 Safari 中的 SVG 路径转换
【发布时间】：2014-11-17 00:50:45
【问题描述】：

我有一个像这样的普通 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 上时，我正在使用 CSS 平滑过渡其颜色：

#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 的问题

【问题讨论】：

是的，当您将内联 SVG 包装在锚标记中时，过渡会中断。这是 webkit 浏览器和其他浏览器中记录的错误。我已经在几个项目中经历过。解决此问题的一种方法是将其包装在中并使用 JS 来伪造 href 操作
这里是一个相关线程：stackoverflow.com/questions/16846628/… 但我还没有得到嵌入式链接。同样，让 JS 劫持元素的点击是我最好的解决方案。
这些是我需要的答案，谢谢！
参考我的答案stackoverflow.com/questions/22593883/…

标签： html css svg hyperlink safari

【解决方案1】：

如果您使用<a xmlns:xlink="" data-href="URL"，则转换将在 safari/webkit 浏览器中工作。但是，您仍然需要 javascript 才能使链接正常工作。所以对于 jQuery 也可以使用这个代码：

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

})

【讨论】：

【解决方案2】：

我在 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>

【讨论】：