html svg单击事件,如何获取HTML中嵌入的SVG onclick事件以显示在HTML中?

这篇博客探讨了在HTML中嵌入SVG并使用onclick事件来实现房间平面图的交互功能。作者遇到两个问题:一是当用户选择不同房间时,之前的高亮效果无法清除;二是尝试在SVG上直接添加点击事件以实现与房间列表相同的功能,但未能成功。作者分享了当前的JavaScript函数代码,并寻求解决这些问题的建议。
摘要由CSDN通过智能技术生成

首先,我是一个JavaScript和SVG的noob,似乎无法找到网络上的答案,我的具体问题,并开始做噩梦...也许我只是没有措辞正确的搜索查询...无论如何...好的,所以我设计了一个使用svg显示房间的平面图,并使用“object”标记将svg嵌入到我的html文档中。在我的网页右侧,我有一个房间的下拉列表。点击时,我想要显示房间信息以及在平面图上突出显示的房间。这我已经完成了一个JavaScript函数。 Yayness。现在的问题:如何获取HTML中嵌入的SVG onclick事件以显示在HTML中?

第一个问题 - 当用户点击一个不同的房间选项时,先前选择的房间的图像仍然突出显示。当选项更改时,如何将其恢复为默认状态?

第二个问题 - 我也希望用户能够点击平面图本身上的房间,并在页面的右侧显示相同的信息。我基本上想要为两个不同的元素使用相同的功能。我试图将脚本复制到svg代码中,但没有任何结果。是否因为svg是html中的嵌入式对象?

任何建议,将不胜感激,包括我是否要对此整个事情的正确方法...

Teamwork

Vision

Header

details go here

Paragraph details to go here

function visionDeta

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值