我是靠谱客的博主 斯文月饼,最近开发中收集的这篇文章主要介绍网页上SVG图添加局部点击事件,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

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图添加局部点击事件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(80)

评论列表共有 0 条评论

立即
投稿
返回
顶部