SVG有四种常用的鼠标响应的脚本写法(SMIL方式、Attributes方式、JavaScript+SMIL方式、EventListener方式),根据不同的需要让大家有更多的选择。本文介绍了四种实现SVG鼠标事件的例子。
SVG鼠标事件实现方式的例子效果是:单击一个红色的矩形后,它的填充颜色会变成蓝色
1 SMIL方式
例程1 鼠标事件之SMIL方式
<svg>
<rect x="15" y="15" width="40" height="40" fill="red">
<set attributeName="fill" to="blue" begin="click"/>
</rect>
</svg>
在前面有关“动画”效果的章节中我们使用过类似的方法,也就是在单击后触发一个动画效果,此例中被改变的是“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"
onclick= "changeColor(evt)"/> u
</svg>
这种事件触发方式想必大家已经很熟悉了,在上一节中,满眼尽是这种事件触发方式,即把事件触发作为元素的属性与其它其他属性写在一起。事件属性在u处,“onclick”事件调用的是“changeColor”函数,参数是“evt”,这样使得函数内部脚本可以从“evt”获得事件相关信息。这种方式比较常用。
3 JavaScript+SMIL方式
例程3 鼠标事件之JavaScript+SMIL方式
<svg onload="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>
这个例子没有图形元素的事先定义,所有定义都是通过脚本完成的,包括事件的定义也都是动态脚本完成的,最后在内存中的SVG DOM机构与例程1是类似的。例程3中,v处的“createElementNS”方法,有了一个后缀“NS”是需要添加命名空间参数的,这里的命名空间定义在u处。
作者注:本方式本人测试在FF(Firefox)下没成功,报了一个错误。
4 EventListener方式
例程4 鼠标事件之EventListener方式
<svg onload="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>
</svg>
这种方法也是经常用到的,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”这样的一般事件对文档中的其它其他元素是有意义的,所以这些事件才沿着文档层次向上冒泡,并且触发目标元素的祖元素的相应事件的处理程序。通常情况下,原始的输入事件冒泡,而高级的语义事件不会。
分享到:
相关推荐
鼠标点击,鼠标移走,可以更换图元,都是些简单实用的小例子,有助新手学习.
jquery.graphviz.svg, 使 graphviz svg图表响应响应的jquery插件 jquery.graphviz.svg可以使Graphviz的输出更加交互和易于浏览的jQuery插件。 使具有以下特性的功能变得容易:突出显示节点/边放大/缩小图形导航- ...
CSS3+SVG实现鼠标响应式APP脸谱图标动画效果源码.zip
CSS3+SVG实现鼠标响应式塔楼和云梯动画效果源码.zip
SVG的鼠标经过动画,非常实用,在平常时用到的地方非常多。
SVG鼠标经过方向感知3D动画特效是一款基于html5 css3实现的鼠标悬停方向感知文字3D动画特效。
CSS3+SVG实现鼠标响应式摇篮车宝宝推车卡通图标动画效果源码.zip
NULL 博文链接:https://luolong344378570.iteye.com/blog/1195560
最近在用svg的点击事件做...SVG •不依赖分辨率 •支持事件处理器 •最适合带有大型渲染区域的应用程序(比如谷歌地图) •复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) •不适合游戏应用 做出的网页在
svg自定义地图,自己的jpg格式图片,转换为svg,可在上面画图,触发点击事件,只支持android studio
这是一款蓝色的html5 svg鼠标拖动气泡滑块动画特效,左右拖动气泡数值变化、数字放大显示动画效果。
主要介绍了vue动态渲染svg、添加点击事件的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
svg鼠标滚轮缩放,鼠标拖动svg。拖动div添加svg元素,并添加元素的左右键单击事件
react.js+svg实现可响应鼠标移动的3d游戏手柄图标动画效果源码.zip
比较乱短的一个文档,说明了SVG的鼠标事件及通过ViewBox控制SVG放大缩小的资料,很久以前整理。
SVG边框可连续变化的鼠标滑过动画按钮
国站翻译过来的一款html5鼠标悬停动画效果 不支持低版本浏览器 建议有特殊需求的懒人使用 使用方法: 1、将css样式引入到你的网页中 2、将body中的代码部分拷贝到你需要的地方即可 (图片、js采用绝对...
炫丽的html5鼠标移动svg圆圈光标动画特效 炫丽的html5鼠标移动svg圆圈光标动画特效
TweenMax.js+SVG实现的鼠标响应式含羞草动画效果源码.zip