如何（其他）我可以使SVG點擊鏈接？

我正在使用對象來嵌入一些我想要其他頁面的SVG。如何（其他）我可以使SVG點擊鏈接？

第一選項是改變內部的XML 見Inkscape的FAQ-S 1.8.1 http://wiki.inkscape.org/wiki/index.php/Frequently_asked_questions

但我想用JavaScript動態更改URL，如果他們有支持JS。我想重複使用相同的SVG文檔，但使用不同的鏈接。所以我需要另一種選擇。

第二個選項，包裝嵌入的對象在「A HREF」標籤，但似乎並沒有工作，這讓不是由SVG覆蓋可點擊的鏈接，但不是SVG股利部分。

{而且，由於該瀏覽器是否回落到我得到兩個可點擊區域我有（通過使用USEMAP變成可點擊）.png文件對象內部複雜。 PNG和DIV剩餘部分....}

第三個選項，這是一個用於svg本身的USEMAP！沒有，似乎也沒有工作。

還有其他的選擇嗎？ Javascript的答案歡迎，作爲參考的目的，但理想情況下不。

EDIT添加HTML代碼

<object class="svg" type="image/svg+xml" data="svgimage.svg" > 
    <img src="pngbackupforIEpre9androidpre3.png" type="image/png" usemap="#mapping"/> 
</object> 
</a> 
<map name="mapping"> 
<area shape="rect" coords="0,0,100,100" href="svgfreezone.php" /> 
</map>

EDIT添加SVG XML代碼

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<!-- Created with Inkscape (http://www.inkscape.org/) --> 
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 617.875 320.75" width="100%" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"> 
<metadata> 
<rdf:RDF> 
<cc:Work rdf:about=""> 
<dc:format>image/svg+xml</dc:format> 
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/> 
<dc:title/> 
</cc:Work> 
</rdf:RDF> 
</metadata> 
<g transform="translate(-66.78125,-339.125)"> 
<rect style="stroke:#000000;stroke-miterlimit:4;stroke-dasharray:none;stroke-width:3.5999999;fill:#ff0000;" height="317" width="614" y="341" x="68.6"/> 
</g> 
</svg>

註釋;該SVG已def'd vacumed，保存爲純，然後使用「簡化顏色Y，樣式爲xml N，組崩ÿ優化，啓用ID剝離Y，嵌入柵格N，保持編輯數據N，啓用viewboxing Y，地帶XML序言N，設置精度3，縮進無「。

來源

2012-04-14 Gamemorize

你有鏈接到你現在的代碼，或者你可以在問題中發佈它。您試圖嵌入的HTML和SVG。 – robertc 2012-04-14 20:32:57

當然我會添加html ...但爲什麼你需要svg的xml？ – Gamemorize 2012-04-14 20:38:41

你說這個鏈接在SVG中？ SVG處理自己的點擊事件，所以如果你點擊一個SVG，那麼這個代碼是相關的。 – robertc 2012-04-15 10:19:40

嗯，我看到兩個選項：

第一種選擇：（這將是唯一的好，如果這是一個Web應用程序;如果它是一個「正規」的網站，這可能不適合你）使用SVG中的鏈接到錨的常規鏈接。這是 - 一個#something網址。只是一個哈希。現在用一個「特殊」的哈希，你可以識別，然後勾到窗口的「hashchange」事件，看看散列==「#my_special_hash」 - 然後重定向到你喜歡的地方。

第二個選項： 放入SVG的佔位符的href，並宣讀了SVG內容使用JavaScript。然後將href替換爲您真正想要的url，並將其注入頁面。大多數瀏覽器都支持將SVG作爲源圖像，並將其作爲對象。你可以看到Raphael庫如何建立SVG，如果你需要實際的代碼。請注意，由於某些舊瀏覽器缺乏支持，因此它使用VML進行回退。

祝你好運！ :-)

來源

2012-04-14 20:53:48

你如何區分網絡應用程序和網站？你有沒有這個＃功能的任何鏈接，我是一個非常新的SVG，我不能真正按照你的第一個選項，對不起。我也要研究訪問JavaScript的svg的XML的可能性....感謝您的想法！ – Gamemorize 2012-04-15 11:22:57

我不認爲它是官方的，它可能是我自己定義它的個人方式。但我認爲一個網絡應用程序是基於網絡的，不僅僅是HTML和圖形，而是在客戶端使用更多的實際代碼。這意味着你的頁面是事件驅動的，他們通常使用JavaScript來訪問網絡。我的定義中的Facebook是一個網絡應用，Google+也是如此。 Stackoverflow在很多地方都是如此。 – 2012-04-15 16:29:27

第一個選項不是關於SVG; SVG允許你放置HREF，所以你只需要做一些像<！href =「＃special_link」> – 2012-04-15 16:30:28

坐落在錨SVG圖像的background-image CSS屬性，這將是點擊。

我在this page中使用了一個。

#infoButton { 
    display: block; 
    float: left; 
    background-image: url('info.svg'); 
    background-repeat: no-repeat; 
    width: 70px; 
    height: 70px; 
}

來源

2013-07-03 17:31:04 Will

-1

務必使用SVG時，有些瀏覽器不支持SVG正確，始終把display: block;。

來源

2016-07-11 09:37:43

如何（其他）我可以使SVG點擊鏈接？

回答

相關問題