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>

当有人将鼠标悬停在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

中的问题

Answer 1

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

Answer 2

如果使用<a xmlns:xlink="" data-href="URL"，过渡将在safari / webkit浏览器中有效。您仍然需要使用javascript来使链接正常工作。所以对于jQuery也使用这个代码：

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

})

<a> link breaks SVG path transition in Safari</a>

2 个答案: