现在很多公众号都直接在正文页通过 SVG 交互动画增加文章的阅读交互体验，而不再跳转H5。结合这一需求，本期分享的内容是如何开发交互式 SVG ，并嵌入微信公众号正文页。设计师和前端开发同学都可以来学习下。学 会 了可以接这方面的私活了，短平快地赚小钱钱。先看下最终 SVG 交互效果：体验微信公众号正文页实际效果，请关注微信公众号：卧梅又闻花。查阅文章《详细教你微信公众号正文页 SVG 交互开发》1 为什么公众号需要... SVG 有四种常用的鼠标响应的脚本写法(SMIL方式、Attributes方式、JavaScript+SMIL方式、EventListener方式)，根据不同的需要让大家有更多的选择。本文介绍了四种实现 SVG 鼠标 事件 的例子。 SVG 鼠标 事件 实现方式的例子效果是：单击一个红色的矩形 1. SVG 图显示首先使用iframe 标签包裹并定义Id iframeId <iframe scrolling="no" id="iframeId" src="~/AI_ SVG /主图. svg " style="margin-top:-7%; position:fixed;width:100%;height:140%;" /> 2. SVG 图在VS中打开找到指定区域代码添加Id 3.js部分，这里我在 SVG 图源码中给一个图片添加了img1的Id $("#iframeId").on( 编者按：本文作者奇舞团前端开发工程师李喆明。前言这篇文章是多年前在 SegmentFault(https://segmentfault.com/q/1010000002424191/a-1020000002432581) 上的一个回答，原问题是问如何使用 Canvas 实现一个下图类似的圆环选择器， 点击 后 会 出现对应的日期。虽然已经有 Canvas 的答案了，不过当时正好在学习 SVG 就... 大致的流程是这样的：实现这个需求是首先通过一个工具（drawio）去自定义绘制图形，然后导出一个 svg 格式的文件，后端搞了一下drawio工具的源码，在导出的时候，为绘制的图形上每个节点都去绑定了一个id（具体是怎么搞得我一个前端也不是太清楚），最后导出，然后前端需要去加载 svg ，然后每个节点都 会 有对应的数据（就是根据绑定的id去获取），然后有些节点上还可能有图片，还需要替换，还可能为每个节点去绑定 事件 做一些事情。然后还使用了d3实现了让 svg 可以缩放拖拽。大概是这个亚子 先上一张自己测试用的 svg SVG 文件是由各个 元素 组成。 元素 由标签定义，而标签格式即html的 元素 定义格式。但是载入一个 SVG 文件，却无法通过常规的js获取对象方式来获取到 SVG 中定义的 元素 ，更无法通过这种方式来动态添加 SVG 元素 与 事件 。 SVG 元素 的操作都要借助于 SVG 的document对象。 SVG 的document对象获取方式为： SVG 快速入门 svg Doc = document.getElementById("... 1 UIEvents（用户界面 事件 ）  focusin（onfocusin）：一个 元素 获得焦点（例如，一段文本被选中）  focusout（onfocusout）：一个 元素 失去焦点（例如，一段文本放弃被选中） activate（onactivate）：一个 元素 通过被单击而激活，或者单击了“enter”键或“shift＋enter”键。 2 Mou... vue中 svg -icon添加 点击事件 不生效 在 svg -icon外面再包裹一层a标签，将click 事件 绑定到a标签上，哦了~亲测有用 <a href='javascript:;' @click="handleKeepOut"> < svg -icon slot="prefix" iconClass="play" class="el-icon-user-solid" id="playButton" />