svg鼠标响应事件的四种方法

jacally

浏览: 770650 次
性别:
来自: 广州

最近访客更多访客>>

331218027

z457412

raymond.chen

pengyl770587227

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Adobe XML JavaScript

查看完整版本 : svg鼠标响应事件的四种方法

鼠标响应事件的四种方法，以click事件为例。

Mouse Events - SMIL

xml 代码

xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="5" y="5" width="40" height="40" fill="red">
<set attributeName="fill" to="blue" begin="click"/>
rect>
svg>

实例演示：http://www.kevlindev.com/tutorials/basics/events/mouse/svg_smil/click.svg

Mouse Events - Attributes

xml 代码

xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
xmlns:a3 CDATA #IMPLIED
a3:scriptImplementation CDATA #IMPLIED>
a3:scriptImplementation CDATA #IMPLIED>
]>
<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">
function changeColor(evt) {
var rect = evt.target;
rect.setAttributeNS(null, "fill", "purple")
}
]]>script>
<rect x="5" y="5" width="40" height="40" fill="red"
onclick="changeColor(evt)"/>
svg>

实例演示:

http://www.kevlindev.com/tutorials/basics/events/mouse/svg_js/onclick.svg

Mouse Events - JavaScript+SMIL

xml 代码

xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
xmlns:a3 CDATA #IMPLIED
a3:scriptImplementation CDATA #IMPLIED>
a3:scriptImplementation CDATA #IMPLIED>
]>
<svg onload="makeShape(evt)"
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">
var svgns = "http://www.w3.org/2000/svg";
function makeShape(evt) {
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
var rect = svgDocument.createElementNS(svgns, "rect");
rect.setAttributeNS(null, "x", "5");
rect.setAttributeNS(null, "y", "5");
rect.setAttributeNS(null, "width", "40");
rect.setAttributeNS(null, "height", "40");
rect.setAttributeNS(null, "fill", "green");
var set = svgDocument.createElementNS(svgns, "set");
set.setAttributeNS(null, "attributeName", "fill");
set.setAttributeNS(null, "to", "blue");
set.setAttributeNS(null, "begin", "click");
rect.appendChild(set);
svgDocument.documentElement.appendChild(rect);
}
]]>script>
svg>

实例演示：http://www.kevlindev.com/tutorials/basics/events/mouse/js_dom_smil/click_js_smil.svg

Mouse Events - EventListener

xml 代码

xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
xmlns:a3 CDATA #IMPLIED
a3:scriptImplementation CDATA #IMPLIED>
a3:scriptImplementation CDATA #IMPLIED>
]>
<svg onload="makeShape(evt)"
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">
var svgns = "http://www.w3.org/2000/svg";
function makeShape(evt) {
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
var rect = svgDocument.createElementNS(svgns, "rect");
rect.setAttributeNS(null, "x", 5);
rect.setAttributeNS(null, "y", 5);
rect.setAttributeNS(null, "width", 40);
rect.setAttributeNS(null, "height", 40);
rect.setAttributeNS(null, "fill", "green");
rect.addEventListener("click", changeColor, false);
svgDocument.documentElement.appendChild(rect);
}
function changeColor(evt) {
var target = evt.target;
target.setAttributeNS(null, "fill", "purple");
}
]]>script>
svg>

实例演示：http://www.kevlindev.com/tutorials/basics/events/mouse/js_dom/click_js.svg

分享到：

用javascript 反馈服务器svg图片两点坐标 ... | SVG 入门教程(三) 绘制

2007-11-17 23:54
浏览 5465
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论