svg鼠标响应事件的四种方法(其中两种可支持火狐)
svg鼠标响应事件的四种方法
鼠标响应事件的四种方法,以click事件为例。 |
Mouse Events - SMIL
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"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 version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
<!ATTLIST svg
xmlns:a3 CDATA #IMPLIED
a3:scriptImplementation CDATA #IMPLIED>
<!ATTLIST script
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"><![CDATA[
function changeColor(evt) {
var rect = evt.target;
rect.setAttributeNS(null, "fill", "purple")
}
]]></script>
<rect x="5" y="5" width="40" height="40" fill="red"
οnclick="changeColor(evt)"/>
</svg>
实例演示:
http://www.kevlindev.com/tutorials/basics/events/mouse/svg_js/onclick.svg
Mouse Events - JavaScript+SMIL
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
<!ATTLIST svg
xmlns:a3 CDATA #IMPLIED
a3:scriptImplementation CDATA #IMPLIED>
<!ATTLIST script
a3:scriptImplementation CDATA #IMPLIED>
]>
<svg οnlοad="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"><![CDATA[
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 version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
<!ATTLIST svg
xmlns:a3 CDATA #IMPLIED
a3:scriptImplementation CDATA #IMPLIED>
<!ATTLIST script
a3:scriptImplementation CDATA #IMPLIED>
]>
<svg οnlοad="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"><![CDATA[
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
svg鼠标响应事件的四种方法(其中两种可支持火狐)相关推荐
- java求二阶微积分方程特解_Scipy:实现微分方程的两种方法:两种不同的解决方案:回答...
我试图解决我的化学论文的微分方程,在那里我偶然发现了一个关于scipy的微分方程求解器"odeint"的问题 . 首先,我根据scipy网站上的示例,通过功能CIDNP_1实现差异 ...
- 判断互质数的九种方法(两种定义+三种质数+两种相邻+两种裂项)
a < ∣ b ∣ a<\vert b\vert a<∣b∣ 定义: a⊥b 当且仅当 (a,b)=1 a⊥b当且仅当 xa+yb=1(存在x,y是正整数) 质数: a和 ...
- Android按钮响应事件的四种方式
一.按钮响应事件的四种方式 整体布局 沿用登录界面,对登录按钮进行事件响应处理 <?xml version="1.0" encoding="utf-8"? ...
- CSS鼠标响应事件经过、移动、点击示例介绍
本文为大家介绍下CSS 鼠标响应事件:鼠标经过CSS.鼠标移动CSS.鼠标点击CSS以及示例,喜欢的朋友可以参考下 几种鼠标触发CSS事件. 说明: onMouseDown 按下鼠标时触发 onMou ...
- [知识图谱实战篇] 五.HTML+D3添加鼠标响应事件显示相关节点及边
前面作者讲解了很多知识图谱原理知识,包括知识图谱相关技术.Neo4j绘制关系图谱等,但仍缺少一个系统全面的实例.为了加深自己对知识图谱构建的认识,为后续创建贵州旅游知识图谱打下基础,作者深入学习了张宏 ...
- c语言鼠标移动响应,CSS鼠标响应事件经过、移动、点击示例介绍
几种鼠标触发CSS事件. 说明: onMouseDown 按下鼠标时触发 onMouseOver 鼠标经过时触发 onMouseUp 按下鼠标松开鼠标时触发 onMouseOut 鼠标移出时触发 on ...
- 关于MFC的使用总结之八——CGridListCtrlEx鼠标响应事件
MFC的使用总结之八--CGridListCtrlEx鼠标响应事件 写在前面 点击表格触发事件 表格中添加按钮,点击按钮触发事件 运行结果如下 最终程序 写在前面 MFC是一种用c++设计交互界面的的 ...
- matplotlib实现按钮以及鼠标响应事件
matplotlib实现按钮 用matplotlib绘图时,想要添加按钮,首先需要导入 from matplotlib.widgets import Button 1.设置按钮的位置,第一个值为水平位 ...
- css标签鼠标移动事件,CSS鼠标响应事件经过、移动、点击示例介绍
几种鼠标触发CSS事件. 说明: onMouseDown 按下鼠标时触发 onMouseOver 鼠标经过时触发 onMouseUp 按下鼠标松开鼠标时触发 onMouseOut 鼠标移出时触发 on ...
最新文章
- ANACONDA安装更新第三方包
- inputStream输入流转为String对象(将String对象转为inputStream输入流)
- Java语言特性运用:各种Java语法特性是怎样被Spring各种版本巧妙运用的?
- 微信小程序 界面从右边滑出_微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)...
- PHP probuf详细步骤_【转】protobuffer php使用
- 9.28 csp-s模拟测试54 x+y+z
- struts validator 基本知识 之 【出现错误信息的条数】。
- 解决nginx端口占用问题
- 基于WEB的达内学子书城/商城源代码
- 软考高级系统分析师下午历年真题
- 【CSS标签的嵌套规则】
- 芯片数据手册下载和阅读
- node连接数据库_数据库2
- C++/C补充知识点,数组,数组传参,二维数组传参打印三种发方法,正则表达式
- 【直播】陈安东,马琦钧:赛题Baseline讲解以及语音识别基础知识介绍
- 中小型局域网上网管理组网方案
- nodejs和php性能,Nodejs 和PHP 性能测试结果
- MySQL(查询语句,关键字)
- 整形变量的定义和使用
- 做一件事如何突破「擅长」达到「精通」
热门文章
- Python入门系列之字符编码
- 零基础 8 周掌握 Python,成为全能人才!
- python web项目案例教程_Python Web开发案例教程(慕课版)——使用Flask、Tornado、Django...
- python列表嵌套字典取值_Python基础语法:你不得不知的几种变量类型
- 教你如何解决Python模块导包没有找到的问题
- 如何在系统崩溃时从C++中获取函数调用栈信息?
- poj3259(Bellman_ford算法)
- 树上分块 - Successor HDU - 4366
- 【Kuangbin 带你飞系列】 基础dp
- 2018年第十届ACM四川省省赛题解(10 / 11)