概述
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 () {//添加点击事件
//事件触发执行
});
});
最后
以上就是斯文月饼为你收集整理的网页上SVG图添加局部点击事件的全部内容,希望文章能够帮你解决网页上SVG图添加局部点击事件所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复