如何將SVG對象插入帶鏈接的HTML？

我不想添加一個鏈接到svg（這是不可能的，因爲svg不是我提供的），但是想添加一個鏈接，如<a href=""><img src="foo.svg"/></a>。只有這次它不是img，而是object（所以我可以包含一個svg）。如何將SVG對象插入帶鏈接的HTML？

它適用於某些瀏覽器，但不適用於firefox。什麼是默認的想法如何做這樣的事情？

來源

2010-01-18 user253104

在Firefox中<object>捕獲所有點擊並且不讓它們從SVG文檔中「冒泡」。一個明智的解決方法是用另一個首先獲得點擊的元素來覆蓋SVG。

還好，這可以通過使用純CSS來實現：

a {position:relative; display:inline-block;} 
a:after {content:""; position:absolute; top:0; left:0; bottom:0; right:0;}

你可能想:-moz-any-link僞類添加到選擇，使其壁虎只。

來源

2010-01-19 19:57:32 Kornel

把SVG文件中的鏈接，而不是，e.g：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
<a xlink:href=""> 
    ... 
</a> 
</svg>

來源

2010-01-19 12:07:46

...如果文件被託管在同一個域，你真的想避免更改文件的服務器上，你可以嘗試這樣的事： VAR aElm = yourObjectElm.contentDocument.documentElement.createElementNS（」 http://www.w3.org/2000/svg「，」a「）; aElm.href.baseVal =「http://your.link.here.com」; // ...將yourObjectElm.contentDocument.documentElement的所有子元素附加到aElm ... // yourObjectElm.contentDocument.documentElement.appendChild（aElm）; – 2010-01-19 12:19:17

Javascript是不可能的，我無法修改文件 – user253104 2010-01-20 12:56:13

隨着svgweb你可以嵌入任意SVG跨瀏覽器，並通過常規的DOM方法來修改它。這包括將事件監聽器附加到SVG的任何部分。

svgweb主頁：
http://code.google.com/p/svgweb/

svgweb快速入門（還討論了添加事件聽衆）：
http://codinginparadise.org/projects/svgweb/docs/QuickStart.html

即使你不能把它在傳統的錨標記這樣（我沒有嘗試過，它可能工作），你至少能夠處理點擊事件並基於它們進行導航，這實際上就是你所追求的。

來源

2010-01-19 19:49:09

JavaScript是不可能的 – user253104 2010-01-20 12:54:37

如何將SVG對象插入帶鏈接的HTML？

回答

相關問題