Javascript 如何获取嵌入在HTML中的SVG的onclick事件以显示在HTML中？_Javascript_Html_Svg

Javascript 如何获取嵌入在HTML中的SVG的onclick事件以显示在HTML中？

javascript html svg

Javascript 如何获取嵌入在HTML中的SVG的onclick事件以显示在HTML中？,javascript,html,svg,Javascript,Html,Svg,首先，我是一个javascript和svg的noob，似乎无法在网上找到我的具体问题的答案，并且开始做噩梦。。。也许我只是没有正确地表达搜索查询。。。无论如何好的，我设计了一个使用svg显示房间的平面图，并使用“object”标记将svg嵌入到我的html文档中。在我的网页右侧，我有一个房间的下拉列表。单击我希望显示房间信息，并在楼层平面图上突出显示房间。这是我用javascript函数完成的。耶内斯。现在谈谈问题：第一个问题–当用户单击其他房间选项时，上一个选定房间的图像仍然高亮显示。当选项

首先，我是一个javascript和svg的noob，似乎无法在网上找到我的具体问题的答案，并且开始做噩梦。。。也许我只是没有正确地表达搜索查询。。。无论如何好的，我设计了一个使用svg显示房间的平面图，并使用“object”标记将svg嵌入到我的html文档中。在我的网页右侧，我有一个房间的下拉列表。单击我希望显示房间信息，并在楼层平面图上突出显示房间。这是我用javascript函数完成的。耶内斯。现在谈谈问题：

第一个问题–当用户单击其他房间选项时，上一个选定房间的图像仍然高亮显示。当选项更改时，如何使其恢复到先前的默认状态

第二个问题–我还希望用户能够单击楼层平面图上的房间，并在页面右侧显示相同的信息。我基本上想对两个不同的元素使用相同的函数。我尝试过将脚本复制到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>


团队合作
视野
标题
细节在这里
要转到此处的段落详细信息
函数visionDetail（）
{
var cres2=document.getElementById（“cres2svg”）；
var svgDoc=cres2.contentDocument；
var visionRoom=svgDoc.getElementById（“visionRoom”）；
visionRoom.getAttributeNode（“样式”）.value=“填充：绿色；笔划：红色；不透明度：1”；
document.getElementById（“headerDetails”）.innerHTML=“Vision Room”；
document.getElementById（“ParadDetails”）.innerHTML=“视觉室位于…”
函数teamworkDetail（）
{
var cres2=document.getElementById（“cres2svg”）；
var svgDoc=cres2.contentDocument；
var teamworkRoom=svgDoc.getElementById（“teamworkRoom”）；
teamworkRoom.getAttributeNode（“样式”）.value=“填充：绿色；笔划：红色；不透明度：1”；
document.getElementById（“headerDetails”）.innerHTML=“团队协作室”；
document.getElementById（“ParadDetails”）.innerHTML=“团队协作室位于…”；
}

这不是解决问题的最优雅的方式，因为你必须为每个房间重复相同的代码。首选方法是创建一个函数，该函数接受房间的名称，然后执行与两个单独函数相同的操作：

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..."
}

回答了我的第一个问题。谢谢：）我还没有解决第二个问题…：(