SVG鼠标事件响应的四种写法_云淡风清-北京的博客

1 SMIL方式

例程1 鼠标事件之SMIL方式
在前面有关“动画”效果的章节中我们使用过类似的方法，也就是在单击后触发一个动画效果，此例中被改变的是“fill”属性，由红变蓝，中间没有渐变的过程，一次到位。
2 Attributes方式

例程2 鼠标事件之Attributes方式
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink=http://www.w3.org/1999/xlink
xmlns:a3="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
a3:scriptImplementation="Adobe">
<script type="text/ecmascript" a3:scriptImplementation="Adobe">
<![CDATA[
function changeColor(evt)
var rect = evt.target;
rect.setAttributeNS(null, "fill", "blue")
]]></script>
<rect x="5" y="5" width="40" height="40"
fill="red"
οnclick= "changeColor(evt)"/> u
这种事件触发方式想必大家已经很熟悉了，在上一节中，满眼尽是这种事件触发方式，即把事件触发作为元素的属性与其它其他属性写在一起。事件属性在u处，“onclick”事件调用的是“changeColor”函数，参数是“evt”，这样使得函数内部脚本可以从“evt”获得事件相关信息。这种方式比较常用。 
3 JavaScript+SMIL方式
 
例程3 鼠标事件之JavaScript+SMIL方式 
<svg οnlοad="makeShape(evt)">
<script><![CDATA[
var svgns = "http://www.w3.org/2000/svg";u
function makeShape(evt) {
svgDoc = evt.target.ownerDocument;
var rect = svgDoc.createElementNS(svgns, "rect");v
rect.setAttributeNS(null, "x", "5");
rect.setAttributeNS(null, "y", "5");
rect.setAttributeNS(null, "width", "40");
rect.setAttributeNS(null, "height", "40");
rect.setAttributeNS(null, "fill", "red");
var set = svgDoc.createElementNS(svgns, "set");
set.setAttributeNS(null, "attributeName", "fill");
set.setAttributeNS(null, "to", "blue");
set.setAttributeNS(null, "begin", "click");
rect.appendChild(set);
svgDoc.rootElement.appendChild(rect);
]]></script>
这个例子没有图形元素的事先定义，所有定义都是通过脚本完成的，包括事件的定义也都是动态脚本完成的，最后在内存中的SVG DOM机构与例程1是类似的。例程3中，v处的“createElementNS”方法，有了一个后缀“NS”是需要添加命名空间参数的，这里的命名空间定义在u处。 
作者注：本方式本人测试在FF(Firefox)下没成功，报了一个错误。 
4 EventListener方式
 
例程4 鼠标事件之EventListener方式 
<svg οnlοad="makeShape(evt)">
<script><![CDATA[
var svgns = "http://www.w3.org/2000/svg";
function makeShape(evt) {
if ( window.svgDocument == null )
svgDoc = evt.target.ownerDocument;
var rect = svgDoc.createElementNS(svgns, "rect");
rect.setAttributeNS(null, "x", 15);
rect.setAttributeNS(null, "y", 15);
rect.setAttributeNS(null, "width", 40);
rect.setAttributeNS(null, "height", 40);
rect.setAttributeNS(null, "fill", "red");
rect.addEventListener("click", changeColor, false); u
svgDoc.documentElement.appendChild(rect);
function changeColor(evt) {
var target = evt.target;
target.setAttributeNS(null, "fill", "blue");
]]></script>
这种方法也是经常用到的，W3C为是DOM元素绑定事件处理函数唯一真正的标准方式。原理就是使用“addEventListener”方法来注册事件方法，而且一次性可以很方便地注册很多事件，“EventListener”被称为“事件监听器”。 “addEventListener”这个方法的参数依次是：事件的名称（如：click）、处理该事件的函数名和是否启用事件捕获的布尔量（一般是false）。
  
作者注：本方式本人测试在FF下没成功，报了一个错误。 

 例程4中，u处调用了“addEventListener”方法来注册“onclick”事件，事件处理函数是“changeColor”。值得注意的是写在参数里的事件名称，要去掉“on””，所以填写的是“click”，而不是“onclick”。
 
 在“addEventListener”的方法中有一个参数表示是否启用事件捕捉，要理解这个变量的作用，我们需要了解一下在DOM2事件模型中，事件传播的三个阶段。
 
 首先，在捕获阶段（capturing phase），事件是从文档对象（Document object）开始，沿着文档树向下一直到目标对象传播.。如果任何目标对象的祖辈（不包括目标对象本身）也有一些指定注册的捕获事件的处理程序，在事件传播的这个阶段（捕获阶段）将运行它们，是否启用事件捕捉的变量的意义也就在于此。
 
 事件传播的下一个阶段发生在目标对象本身：所有注册到目标对象的对应事件处理程序都被运行。
 
 事件传播的第三阶段是冒泡阶段，或者说按文档层次倒序进行，从目标元素到文档对象（Document object）。尽管所有的事件都受事件传播的捕获阶段（capturing phase）的影响，但是并不是所有类型的事件都冒泡，像“mousedown”这样的一般事件对文档中的其它其他元素是有意义的，所以这些事件才沿着文档层次向上冒泡，并且触发目标元素的祖元素的相应事件的处理程序。通常情况下，原始的输入事件冒泡，而高级的语义事件不会。
                    SVG有四种常用的鼠标响应的脚本写法(SMIL方式、Attributes方式、JavaScript+SMIL方式、EventListener方式)，根据不同的需要让大家有更多的选择。本文介绍了四种实现SVG鼠标事件的例子。SVG鼠标事件实现方式的例子效果是：单击一个红色的矩形后，它的填充颜色会变成蓝色1 SMIL方式例程1 鼠标事件之SMIL方式 在前面
				SVG文件是由各个元素组成。元素由标签定义，而标签格式即html的元素定义格式。但是载入一个SVG文件，却无法通过常规的js获取对象方式来获取到SVG中定义的元素，更无法通过这种方式来动态添加SVG元素与事件。 SVG元素的操作都要借助于SVG的document对象。SVG的document对象获取方式为：
SVG 快速入门
svgDoc = document.getElementById("...
				SVG事件类型总结 
　SVG事件的类型总结，文章对SVG可用的一些事件类型按照事件的类别进行了分类：UIEvents（用户界面事件）、MouseEvents（鼠标事件）、KeyEvents（键盘事件）、SVGEvents（SVG文档事件）、SMILEvents（SMIL动画事件）、MutationEvents（DOM 树变化事件）。 来源：SVG中国(ChinaSVG.COM)
　　下面是S...
				&lt;svg class="statement_right_bottom_more" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1107"&gt;
&lt;script type="text/ecmascript"&gt;&lt;![
				大致的流程是这样的：实现这个需求是首先通过一个工具（drawio）去自定义绘制图形，然后导出一个svg格式的文件，后端搞了一下drawio工具的源码，在导出的时候，为绘制的图形上每个节点都去绑定了一个id（具体是怎么搞得我一个前端也不是太清楚），最后导出，然后前端需要去加载svg，然后每个节点都会有对应的数据（就是根据绑定的id去获取），然后有些节点上还可能有图片，还需要替换，还可能为每个节点去绑定事件做一些事情。然后还使用了d3实现了让svg可以缩放拖拽。大概是这个亚子
先上一张自己测试用的svg