网页上SVG图添加局部点击事件

最新推荐文章于 2022-06-30 16:46:00 发布

啥也不是　　　　　　　　

最新推荐文章于 2022-06-30 16:46:00 发布

阅读量6.5k

点赞数

文章标签： html jquery javascript

本文链接：https://blog.youkuaiyun.com/king_miQ/article/details/107067986

版权

本文详细介绍如何将SVG图像嵌入网页并实现局部点击交互。通过使用iframe标签包裹SVG图片，为图片区域添加Id，并通过JavaScript监听iframe加载完成后的点击事件，实现特定区域的响应功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.SVG图若要显示在网页上，并实现局部点击的话，首先要使用iframe 标签包裹你的svg图片具体如下，并给iframe定义Id：iframeId方便后续js使用

  <iframe   scrolling="no" id="iframeId" src="~/AI_SVG/主图.svg" 
  style="margin-top:-7%; position:fixed;width:100%;height:140%;" />

2.SVG图在VS中打开，这里可以检查页面并找到指定区域代码添加标签Id，因为我们这里是图片，所以是一个img标签包裹的，我们就只需要给这个标签添加Id，具体如图
在这里插入图片描述

3.js部分，这里我们在SVG图源码中给一个id为img6的标签添加一个事件就可以实现了。最后别忘记引用js文件。

 $("#iframeId").on("load", function (event) {//判断 iframe是否加载完成  这一步很重要
            $("#img6", this.contentDocument).click(function () {//添加点击事件
            //事件触发执行
            });
 });