首先，我是一个 javascript 和 svg 菜鸟，似乎无法在网上找到我的具体问题的答案并开始做噩梦......也许我只是没有正确地表达搜索查询...... . 不管怎样... 好吧，所以我使用 svg 设计了一个显示房间的平面图，并使用“object”标签将 svg 嵌入到我的 html 文档中。在我网页的右侧，我有一个房间的下拉列表。单击时，我希望显示房间信息以及要在平面图上突出显示的房间。这是我用 javascript 函数完成的。耶尼斯。现在解决问题:
第一个问题——当用户点击不同的房间选项时，之前选择的房间的图像仍然突出显示。 How do I get it to default back to previous state when the option changes?
第二个问题——我还希望用户能够点击平面图上的房间，并在页面右侧显示相同的信息。我基本上想对两个不同的元素使用相同的函数。我试过将脚本复制到 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>
最佳答案
这不是解决问题的最优雅方法，因为您必须为每个房间重复相同的代码。一种首选方法是创建一个接受房间名称的函数，然后执行与两个独立函数相同的操作:
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..."
}
关于javascript - 如何让 HTML 中嵌入的 SVG 的 onclick 事件显示在 HTML 中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21460867/