- 浏览: 132085 次
- 性别:
- 来自: 未来
文章分类
- 全部博客 (174)
- Eclispe (3)
- javaScript (33)
- SVG学习 (22)
- Java (21)
- 网站 (12)
- learn English (1)
- 文档 (25)
- 常用网站收录 (11)
- struts (6)
- 常用API (1)
- html (2)
- jsp (2)
- spring (2)
- IDE (1)
- 数据结构 (1)
- JDBC (2)
- html + css (1)
- xml (3)
- 心声 (1)
- Axis2 (1)
- svg (4)
- webService (2)
- unix (2)
- c/c++ (3)
- html5 (1)
- Android (2)
- Jet标签 (1)
- oracle (2)
- 工具 (1)
- ideas (0)
- lean plan (1)
- java技术网站,信息收集综合及分类 (0)
最新评论
-
calosteward:
感谢博主对svg convert to PDF资源的分享。我也 ...
How to Convert a SVG File to PDF Format -
long316:
fhhhh
WinArchiver 2.7 -
long316:
ddddd
WinArchiver 2.7
http://ribbonchen.blog.163.com/blog/static/1183165052012013105714256/
先总结下SVG的事件响应类型:
1 UIEvents(用户界面事件)
? focusin(onfocusin):一个元素获得焦点(例如,一段文本被选中)
? focusout(onfocusout):一个元素失去焦点(例如,一段文本放弃被选中)
? activate(onactivate):一个元素通过被单击而激活,或者单击了"enter"键或"shift+enter"键。
2 MouseEvents(鼠标事件)
click(onclick):一个指针设备(例如,鼠标)在一个元素上进行单击,"mousedown"和"mouseup"事件会伴随发生在同样的位置。如果多次在同一个位置双击,那么evt.detail 属性的值会变成2;单击的话是1,所以可以据此判断是双击还是单击。
? mousedown(onmousedown):鼠标在一个元素上按下。
? mouseup(onmouseup):鼠标在一个元素上被释放,也就是按键弹起。
? mouseover(onmouseover):鼠标在一个元素上悬停。
? mousemove(onmousemove):鼠标移动经过一个元素。
? mouseout(onmouseout):鼠标从一个元素移开。
注意:当鼠标在一个元素上单击的时候,三个事件的发生顺序为onmousedown、onmouseup、onclick。
3 KeyEvents(键盘事件)
KeyEvents(键盘事件),至今仍不是SVG标准的一部分,但是很多SVG解析器都支持)
? keydown(onkeydown):按下一个键。
? keyup(onkeyup):释放一个键。
? keypress(onkeypress):按下并释放一个键。
4 SVGEvents(SVG文档事件)
? SVGLoad(onload):当客户端完全解析了SVG文档或者其中的元素,或者所需的外部资源已经准备好的时候会触发此事件,此时已经准备开始渲染SVG图像。
? SVGUnload(onunload):当SVG文档从浏览器窗口或者某个框架中被删除后会触发此事件,此事件只能应用在<SVG>元素上。
? SVGAbort(onabort):当正在载入的文档或者元素被中止时会触发此事件。
? SVGError(onerror):当载入一个元素或者当执行脚本发生错误时,都会触发此事件。
? SVGResize(onresize):当嵌入有SVG文档的浏览器窗口或者框架的尺寸发生改变时会触发此事件,此事件也只能应用在"<SVG>"元素上。
? SVGScroll(onscroll):当用户拖动窗口的滚动条或者浏览文档视图时,或当通过脚本改变了"currentTranslate"属性值时,都会触发此事件,此事件也只能应用在<SVG>元素上。
? SVGZoom(onzoom ):当用户缩放SVG文档视图时,或当通过脚本改变了"currentScale"属性值时,都会触发此事件,此事件也只能应用在<SVG>元素上。
5 SMILEvents(SMIL动画事件)
? beginEvent(onbegin):当动画开始时触发此事件,此事件对动画元素有效。
? endEvent(onend):当动画结束时触发此事件,此事件对动画元素有效。
? repeatEvent(onrepeat):当动画重复播放时触发此事件,此事件对动画元素有效。
6 MutationEvents(DOM 树变化事件)
? DOMSubtreeModified(none):常规事件,通告一个元素或一个文档所有的变化。
? DOMNodeInserted(none):当一个新节点被插入到给定的父节点时的通知事件。
? DOMNodeRemoved(none):当一个节点从父节点中删除时的通知事件。
? DOMNodeRemovedFromDocument(none):当一个节点从文档中删除的时,无论这种删除是节点直接被删除,还是它的祖先节点被删除导致它跟着被删除,都会生成该通知事件。
? DOMNodeInsertedIntoDocument(none):当一个节点被插入到文档中,无论是直接插入还是随着祖先节点的插入而插入,都会生成该通知事件。
? DOMAttrModified(none):当一个给定节点的属性被修改时生成该通知事件。
? DOMCharacterDataModified(none):当一个节点(例如文本元素)内的字符数据被改变时,生成该通知事件。
比如通过javascript给svg dom元素element添加鼠标经过事件(onmouseover也可为onmousemove):
element.setAttribute("onmouseover"," getSreenCoordinates (evt)");
函数showSubWorkflow(evt):
function getSreenCoordinates (evt){
alert(evt);
}
evt是事件对象,它的相关方法有:
evt.getTarget()=>evt.target
evt.getOwnerDocument() => evt. ownerDocument
evt.getDocumentElement() => evt. ocumentElement
evt.getType() => evt.type
evt.getCharCode() => evt.charCode
evt.getKeyCode() => evt.keyCode
evt.getTarget() => evt.target
evt.getScreenX() => evt.screenX
evt.getClientX() => evt.clientX
所以获取鼠标即时屏幕坐标的函数可写为:
function getSreenCoordinates (evt){
var left = evt.getScreenX();
var top = evt.getScreenY();
return {left,top};
}
先总结下SVG的事件响应类型:
1 UIEvents(用户界面事件)
? focusin(onfocusin):一个元素获得焦点(例如,一段文本被选中)
? focusout(onfocusout):一个元素失去焦点(例如,一段文本放弃被选中)
? activate(onactivate):一个元素通过被单击而激活,或者单击了"enter"键或"shift+enter"键。
2 MouseEvents(鼠标事件)
click(onclick):一个指针设备(例如,鼠标)在一个元素上进行单击,"mousedown"和"mouseup"事件会伴随发生在同样的位置。如果多次在同一个位置双击,那么evt.detail 属性的值会变成2;单击的话是1,所以可以据此判断是双击还是单击。
? mousedown(onmousedown):鼠标在一个元素上按下。
? mouseup(onmouseup):鼠标在一个元素上被释放,也就是按键弹起。
? mouseover(onmouseover):鼠标在一个元素上悬停。
? mousemove(onmousemove):鼠标移动经过一个元素。
? mouseout(onmouseout):鼠标从一个元素移开。
注意:当鼠标在一个元素上单击的时候,三个事件的发生顺序为onmousedown、onmouseup、onclick。
3 KeyEvents(键盘事件)
KeyEvents(键盘事件),至今仍不是SVG标准的一部分,但是很多SVG解析器都支持)
? keydown(onkeydown):按下一个键。
? keyup(onkeyup):释放一个键。
? keypress(onkeypress):按下并释放一个键。
4 SVGEvents(SVG文档事件)
? SVGLoad(onload):当客户端完全解析了SVG文档或者其中的元素,或者所需的外部资源已经准备好的时候会触发此事件,此时已经准备开始渲染SVG图像。
? SVGUnload(onunload):当SVG文档从浏览器窗口或者某个框架中被删除后会触发此事件,此事件只能应用在<SVG>元素上。
? SVGAbort(onabort):当正在载入的文档或者元素被中止时会触发此事件。
? SVGError(onerror):当载入一个元素或者当执行脚本发生错误时,都会触发此事件。
? SVGResize(onresize):当嵌入有SVG文档的浏览器窗口或者框架的尺寸发生改变时会触发此事件,此事件也只能应用在"<SVG>"元素上。
? SVGScroll(onscroll):当用户拖动窗口的滚动条或者浏览文档视图时,或当通过脚本改变了"currentTranslate"属性值时,都会触发此事件,此事件也只能应用在<SVG>元素上。
? SVGZoom(onzoom ):当用户缩放SVG文档视图时,或当通过脚本改变了"currentScale"属性值时,都会触发此事件,此事件也只能应用在<SVG>元素上。
5 SMILEvents(SMIL动画事件)
? beginEvent(onbegin):当动画开始时触发此事件,此事件对动画元素有效。
? endEvent(onend):当动画结束时触发此事件,此事件对动画元素有效。
? repeatEvent(onrepeat):当动画重复播放时触发此事件,此事件对动画元素有效。
6 MutationEvents(DOM 树变化事件)
? DOMSubtreeModified(none):常规事件,通告一个元素或一个文档所有的变化。
? DOMNodeInserted(none):当一个新节点被插入到给定的父节点时的通知事件。
? DOMNodeRemoved(none):当一个节点从父节点中删除时的通知事件。
? DOMNodeRemovedFromDocument(none):当一个节点从文档中删除的时,无论这种删除是节点直接被删除,还是它的祖先节点被删除导致它跟着被删除,都会生成该通知事件。
? DOMNodeInsertedIntoDocument(none):当一个节点被插入到文档中,无论是直接插入还是随着祖先节点的插入而插入,都会生成该通知事件。
? DOMAttrModified(none):当一个给定节点的属性被修改时生成该通知事件。
? DOMCharacterDataModified(none):当一个节点(例如文本元素)内的字符数据被改变时,生成该通知事件。
比如通过javascript给svg dom元素element添加鼠标经过事件(onmouseover也可为onmousemove):
element.setAttribute("onmouseover"," getSreenCoordinates (evt)");
函数showSubWorkflow(evt):
function getSreenCoordinates (evt){
alert(evt);
}
evt是事件对象,它的相关方法有:
evt.getTarget()=>evt.target
evt.getOwnerDocument() => evt. ownerDocument
evt.getDocumentElement() => evt. ocumentElement
evt.getType() => evt.type
evt.getCharCode() => evt.charCode
evt.getKeyCode() => evt.keyCode
evt.getTarget() => evt.target
evt.getScreenX() => evt.screenX
evt.getClientX() => evt.clientX
所以获取鼠标即时屏幕坐标的函数可写为:
function getSreenCoordinates (evt){
var left = evt.getScreenX();
var top = evt.getScreenY();
return {left,top};
}
发表评论
-
使用脚本动态操作 SVG 文档
2012-08-20 23:25 699http://www.ibm.com/developerwor ... -
SVG脚本编程的一些技巧 .
2012-08-20 23:24 819http://blog.csdn.net/mtfsoft/ar ... -
有鼠标位置获取元素
2012-12-23 23:36 599document.elementFromPoint(x,y) ... -
getCTM
2012-08-19 17:22 708<svg xmlns="http://www. ... -
svg_example
2012-04-26 00:54 763http://srufaculty.sru.edu/david ... -
textPath element | SVGTextPathElement object
2012-02-13 22:51 852http://msdn.microsoft.com/ZH-CN ... -
path element | SVGPathElement object
2012-02-13 22:49 1240http://msdn.microsoft.com/ZH-CN ... -
svg text参考
2012-02-13 14:20 688http://www.w3.org/TR/SVG11/text ... -
How to Convert a SVG File to PDF Format
2012-02-05 22:40 1105http://xmlgraphics.apache.org/b ... -
在svg文间画图过程中放大缩小图片后,坐标偏移问题
2012-01-01 16:48 1654http://blog.csdn.net/qingcai200 ... -
创建随内容动态缩放的SVG图形
2012-01-01 16:47 1895创建随内容动态缩放的S ... -
svg矩阵变换
2012-01-01 16:16 904svg矩阵变换 -
svg变换参考
2012-01-01 16:14 884<?xml version="1.0" ... -
svg网站 参考信息
2011-12-31 10:53 870http://blog.csdn.net/xuezhimeng ... -
用CorelDRAW制作SVG手机主题界面图片
2011-10-25 23:57 2243用CorelDRAW制作SVG手机主题界面图片 Ljmsto ... -
动态创建 svg
2011-10-20 17:34 598http://riso.iteye.com/blog/3934 ... -
参考网站收录
2011-10-12 15:22 740PDM中文网运维(http://www.pdmcn.com/b ... -
svg网站
2011-10-08 15:03 1089http://smartblack.iteye.com/blo ... -
svg学习
2011-09-26 00:11 444<?xml version="1.0" ... -
svg的
2011-09-24 00:47 832http://xinsheng.huawei.com/cn/b ...
相关推荐
鼠标点击,鼠标移走,可以更换图元,都是些简单实用的小例子,有助新手学习.
jquery.graphviz.svg, 使 graphviz svg图表响应响应的jquery插件 jquery.graphviz.svg可以使Graphviz的输出更加交互和易于浏览的jQuery插件。 使具有以下特性的功能变得容易:突出显示节点/边放大/缩小图形导航- ...
SVG原理图作者: 肯·康德特(Ken Kundert) 版本: 1.1.0 发布时间: 2020-08-18 该软件包使您无需鼠标即可创建简单的SVG原理图和框图。 相反,您可以使用Python来构建原理图,以实例化和放置符号和导线。简单的...
svg加snap.svg.js能做出饼状图,柱状图,折线图,svg事件和js事件的结合,svg坐标
二:按住鼠标左键,拖着鼠标将图标完全框住,就会出现下图界面 此时通过箭头就可以调整图标大小了 三:调整后的效果 软件功能强大,朋友们自己去探索吧 下边是软件下载地址,是绿色版的,不用安装,40m左右 thunder...
svg-sparkline:SVG :: Sparkline CPAN模块的源
-- svg组件 --> <template> <svg class="svg-icon" :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName" /> </svg> </template> <script> export default { name: 'SvgIcon', props: {
SVG地图 可以通过或安装的一组SVG映射: :Australia: :Austria: :Brazil: :Cambodia: :Cameroon: :Canada: :Cape_Verde: :China: :Colombia: :France: :France: :Germany: :Greece: 希腊 :Honduras: ...
浏览器扩展程序可以像SVG一样获取语义,可伸缩,可访问的网站屏幕截图,就像获取PNG屏幕截图一样简单。 为什么使用这个? SVG屏幕截图提供了优于普通PNG屏幕截图的各种优势,同时又保留了以下优点: :framed_...
向其提供一系列屏幕截图和图章,它将确定帧之间的变化并输出动画SVG截屏。 安装及使用 如果有兴趣,尚未准备好一般使用,请查看下面的“ 。 特征 允许提前(批量)或实时流式接收屏幕截图 仅更新更改的区域(截至...
关于SVG的一些研究文献,主要是以H桥为单元模块。在控制上大多是对无功电流与指定电流的差值进行调节的。
SVG( Scalable Vector Graphics),即可缩放矢量图形, 是基于XML( Extensible Markup Language) 描述二维矢量图形的标记语言,由World Wide Web Consortium( W3C联盟,即万维网 联盟) 自1999年开始开发的开放...
geojson-to-svg-cli 用于将GeoJSON转换为SVG的命令行工具。 正在安装 使用直接运行它: cat example.geo.json | npx geojson-to-svg-cli > example.svg 或全局安装并运行它: npm install -g geojson-to-svg-cli...
svg2vd svg2vd是SVG到VectorDrawable命令行工具。安装您可以使用 w /以下命令来安装svg2vd : npm install -g svg2vd用法Usage: svg2vd [options] [file]Options: -V, --version output the version number -s, --...
重新打开编辑器”(通过命令面板) 选择“图像查看器”并将其设置为默认值命令: 命令描述SVG:打开预览将预览打开到活动视图列SVG:打开侧面预览打开预览到侧视图列SVG:显示源活动预览的开源文件设定: 财产描述...
HTML5 svg实现响应鼠标点击燃烧的光剑火焰箭动画效果源码.zip
HTML5 svg实现响应鼠标移动的地上手电筒照明光亮效果源码.zip
获取svg颜色从SVG文件中提取笔触和填充颜色。 设计用于节点,而不是浏览器。安装npm install get-svg-colors --save用法const getColors = require ( "get-svg-colors" )// Give it an SVG filenameconst colors = ...
Svg2Desmos 提取一个svg文件,并将其转换为一堆用于desmos的控制台命令
最近在用svg的点击事件做...SVG •不依赖分辨率 •支持事件处理器 •最适合带有大型渲染区域的应用程序(比如谷歌地图) •复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) •不适合游戏应用 做出的网页在