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

Question

首先，我是一个javascript和svg noob，似乎无法在网上找到针对我的特定问题的答案并开始做噩梦...也许我只是没有正确地短语搜索查询...无论如何。 ..好的，所以我设计了一个使用svg显示房间的平面图，并使用“对象”标签将svg嵌入到html文档中。 在网页的右侧，我有一个房间的下拉列表。 单击时，我要显示房间信息以及要在平面图上突出显示的房间。 我已经用javascript函数完成了此操作。 Yayness。 现在针对问题：

第一个问题–当用户单击其他房间选项时，先前选中的房间的图像仍然突出显示。 当选项更改时，如何将其恢复为默认状态？

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

Answer 1

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

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

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-01-30 16:19:26

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-01-30 16:19:26

解决方案1
1 已采纳 2014-01-30 16:19:26