如何獲取HTML中嵌入的SVG onclick事件以顯示在HTML中？

首先，我是一個JavaScript和SVG的noob，似乎無法找到網絡上的答案，我的具體問題，並開始做噩夢...也許我只是沒有措辭正確的搜索查詢...無論如何...好的，所以我設計了一個使用svg顯示房間的平面圖，並使用「object」標記將svg嵌入到我的html文檔中。在我的網頁右側，我有一個房間的下拉列表。點擊時，我想要顯示房間信息以及在平面圖上突出顯示的房間。這我已經完成了一個JavaScript函數。 Yayness。現在的問題：如何獲取HTML中嵌入的SVG onclick事件以顯示在HTML中？

第一個問題 - 當用戶點擊一個不同的房間選項時，先前選擇的房間的圖像仍然突出顯示。當選項更改時，如何將其恢復爲默認狀態？

第二個問題 - 我也希望用戶能夠點擊平面圖本身上的房間，並在頁面的右側顯示相同的信息。我基本上想要爲兩個不同的元素使用相同的功能。我試圖將腳本複製到svg代碼中，但沒有任何結果。是否因爲svg是html中的嵌入式對象？

任何建議，將不勝感激，包括我是否要對此整個事情的正確方法...

<html> 
<object id="cres2svg" data="crescent2map.svg" type="image/svg+xml" style="float: left;"></object> 

<select name="boardroomList" style="font-size: 12px;"> 
<option onclick="teamworkDetail()">Teamwork</option> 
<option onclick="visionDetail()">Vision</option> 
</select> 

<h3 id="headerDetails" style="margin-left: 680px; text-align: left; color: rgb(0, 0, 153); font- family: arial; font-size: 14px;">Header 
details go here</h3> 
<p id="paraDetails" style="margin-left: 680px; text-align: left; color: rgb(0, 0, 153); font-family: arial; font-size: 12px;">Paragraph details to go here</p> 
</html> 

<script> 
function visionDetail() 
{ 
var cres2 = document.getElementById("cres2svg"); 
var svgDoc = cres2.contentDocument; 
var visionRoom = svgDoc.getElementById("visionRoom"); 
visionRoom.getAttributeNode("style").value="fill:green;stroke:red;opacity:1"; 
document.getElementById("headerDetails").innerHTML= "Vision Room"; 
document.getElementById("paraDetails").innerHTML="The Vision Room is located..."} 


function teamworkDetail() 
{ 
var cres2 = document.getElementById("cres2svg"); 
var svgDoc = cres2.contentDocument; 
var teamworkRoom = svgDoc.getElementById("teamworkRoom"); 
teamworkRoom.getAttributeNode("style").value="fill:green;stroke:red;opacity:1"; 
document.getElementById("headerDetails").innerHTML= "Teamwork Room"; 
document.getElementById("paraDetails").innerHTML="The Teamwork Room is located..."; 
} 
</script>

來源

2014-01-30 crinkwest

這不是辦法，因爲你不必重複這一問題的最優雅的方式每個房間的代碼相同。優選的方法是創建一個接受房間的名稱的函數，然後做同樣的事情，你的兩個單獨的功能：

function showRoomDetail(roomId) 
{ 
    var cres2 = document.getElementById("cres2svg"); 
    var svgDoc = cres2.contentDocument; 
    var roomRef = svgDoc.getElementById(roomId); 
     //....etc Although you'd also have to maybehold the details of each room in an array of objects 
}

如果您不希望上面去的理念，而是保留它的你擁有它的方式。您遇到的問題是，您需要手動重置其他房間的呼叫到特定房間的樣式：

function visionDetail() 
{ 
    var cres2 = document.getElementById("cres2svg"); 
    var svgDoc = cres2.contentDocument; 
    var visionRoom = svgDoc.getElementById("visionRoom"); 
    visionRoom.getAttributeNode("style").value="fill:green;stroke:red;opacity:1"; 
    svgDoc.getElementById("teamworkRoom").getAttributeNode("style").value=""; // sets the style to empty 
    svgDoc.getElementById("anotherRoomId").getAttributeNode("style").value=""; // sets the style to empty 
    document.getElementById("headerDetails").innerHTML= "Vision Room"; 
    document.getElementById("paraDetails").innerHTML="The Vision Room is located..." 
}

來源

2014-01-30 16:19:26 Pineda

已解答我的第一個問題。謝謝:)我還沒有解決第二個...... :( – crinkwest

如何獲取HTML中嵌入的SVG onclick事件以顯示在HTML中？

回答

相關問題