<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路徑轉換

回答

相關問題