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

最新推荐文章于 2022-10-19 22:44:45 发布
最新推荐文章于 2022-10-19 22:44:45 发布
阅读量1.4k 收藏
点赞数
分类专栏： SVG 文章标签： Adobe XML JavaScript ViewUI
查看完整版本 : svg鼠标响应事件的四种方法
鼠标响应事件的四种方法，以click事件为例。

Mouse Events - SMIL

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



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

Mouse Events - Attributes
xml 代码
  1.   
  2. xml version="1.0" encoding="ISO-8859-1" standalone="no"?>  
  4. "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [   
  6. xmlns:a3 CDATA #IMPLIED   
  7. a3:scriptImplementation CDATA #IMPLIED>  
  9. a3:scriptImplementation CDATA #IMPLIED>  
  10. ]>  
  11. <svg xmlns="http://www.w3.org/2000/svg"  
  12. xmlns:xlink="http://www.w3.org/1999/xlink"  
  13. xmlns:a3="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"  
  14. a3:scriptImplementation="Adobe">  
  15. <script type="text/ecmascript" a3:scriptImplementation="Adobe"> 
  16. function changeColor(evt) {  
  17. var rect = evt.target;  
  18.  
  19. rect.setAttributeNS(null, "fill", "purple")  
  20. }  
  21. ]]>script>  
  22. <rect x="5" y="5" width="40" height="40" fill="red"  
  23. onclick="changeColor(evt)"/>  
  24. svg>  
  25.   
实例演示:

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

Mouse Events - JavaScript+SMIL

xml 代码
  1. xml version="1.0" encoding="ISO-8859-1" standalone="no"?>  
  3. "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [   
  5. xmlns:a3 CDATA #IMPLIED   
  6. a3:scriptImplementation CDATA #IMPLIED>  
  8. a3:scriptImplementation CDATA #IMPLIED>  
  9. ]>  
  10. <svg onload="makeShape(evt)"  
  11. xmlns="http://www.w3.org/2000/svg"  
  12. xmlns:xlink="http://www.w3.org/1999/xlink"  
  13. xmlns:a3="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"  
  14. a3:scriptImplementation="Adobe">  
  15. <script type="text/ecmascript" a3:scriptImplementation="Adobe"> 
  16. var svgns = "http://www.w3.org/2000/svg";  
  17. function makeShape(evt) {  
  18. if ( window.svgDocument == null )  
  19. svgDocument = evt.target.ownerDocument;  
  20.  
  21. var rect = svgDocument.createElementNS(svgns, "rect");  
  22. rect.setAttributeNS(null, "x", "5");  
  23. rect.setAttributeNS(null, "y", "5");  
  24. rect.setAttributeNS(null, "width", "40");  
  25. rect.setAttributeNS(null, "height", "40");  
  26. rect.setAttributeNS(null, "fill", "green");  
  27.  
  28. var set = svgDocument.createElementNS(svgns, "set");  
  29. set.setAttributeNS(null, "attributeName", "fill");  
  30. set.setAttributeNS(null, "to", "blue");  
  31. set.setAttributeNS(null, "begin", "click");  
  32.  
  33. rect.appendChild(set);  
  34. svgDocument.documentElement.appendChild(rect);  
  35. }  
  36. ]]>script>  
  37. svg>  

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

Mouse Events - EventListener

xml 代码
  1. xml version="1.0" encoding="ISO-8859-1" standalone="no"?>  
  3. "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [   
  5. xmlns:a3 CDATA #IMPLIED   
  6. a3:scriptImplementation CDATA #IMPLIED>  
  8. a3:scriptImplementation CDATA #IMPLIED>  
  9. ]>  
  10. <svg onload="makeShape(evt)"  
  11. xmlns="http://www.w3.org/2000/svg"  
  12. xmlns:xlink="http://www.w3.org/1999/xlink"  
  13. xmlns:a3="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"  
  14. a3:scriptImplementation="Adobe">  
  15. <script type="text/ecmascript" a3:scriptImplementation="Adobe"> 
  16. var svgns = "http://www.w3.org/2000/svg";  
  17. function makeShape(evt) {  
  18. if ( window.svgDocument == null )  
  19. svgDocument = evt.target.ownerDocument;  
  20.  
  21. var rect = svgDocument.createElementNS(svgns, "rect");  
  22. rect.setAttributeNS(null, "x", 5);  
  23. rect.setAttributeNS(null, "y", 5);  
  24. rect.setAttributeNS(null, "width", 40);  
  25. rect.setAttributeNS(null, "height", 40);  
  26. rect.setAttributeNS(null, "fill", "green");  
  27.  
  28. rect.addEventListener("click", changeColor, false);  
  29.  
  30. svgDocument.documentElement.appendChild(rect);  
  31. }  
  32.  
  33. function changeColor(evt) {  
  34. var target = evt.target;  
  35. target.setAttributeNS(null, "fill", "purple");  
  36. }  
  37. ]]>script>  
  38. svg>  

实例演示：http://www.kevlindev.com/tutorials/basics/events/mouse/js_dom/click_js.svg
wenzi_li
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
svg小例子(主要是鼠标事件)
07-09
鼠标点击,鼠标移走,可以更换图元,都是些简单实用的小例子,有助新手学习.
SVG鼠标事件响应的四种写法
动弈的专栏
08-10 2757
SVG有四种常用的鼠标响应的脚本写法(SMIL方式、Attributes方式、JavaScript+SMIL方式、EventListener方式)，根据不同的需要让大家有更多的选择。本文介绍了四种实现SVG鼠标事件的例子。 SVG鼠标事件实现方式的例子效果是：单击一个红色的矩形
svg 响应鼠标时间_使SVG响应
cungui5726的博客
08-21 189
svg 响应鼠标时间For an image format that features infinite scalability, SVG can be a surprisingly difficult format to make responsive: vector images do not adjust themselves to the size of the viewport by d...
html5 svg 中元素点击事件添加方法
09-28
最近在用svg的点击事件做东西，之所以用svg而不用canvas就是因为svg内的元素可以添加点击事件，接下来详细介绍添加方法，感兴趣的朋友可以了解下
javascript SVG的动画，脚本，事件
seacean2000的专栏
11-14 7802
svg支持鼠标单击、鼠标移动和鼠标按下，动画，脚本响应事件。 svg支持鼠标事件的例子： "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> xmlns="http://www.w3.org/2000/svg"> stroke-width="2" fill="red">
CSS鼠标响应事件经过、移动、点击示例介绍
09-05
首先，我们有以下几种常见的CSS鼠标响应事件： 1. `onMouseDown`：当用户按下鼠标按钮时触发此事件。这个事件可以用来开始一个操作或者启动一个动画。 2. `onMouseOver`：当鼠标指针进入元素范围时触发。这常用于...
SVG鼠标经过方向感知3D动画特效特效代码
03-20
总的来说，"SVG鼠标经过方向感知3D动画特效"是一个结合了SVG、HTML5和CSS3技术的互动设计，通过响应鼠标的移动，创造出独特的视觉体验。开发者需要熟悉SVG图形的基本语法，理解CSS3的3D变换和过渡效果，并具备一定的...
SVG图片剪辑路径鼠标悬停效果.zip
07-11
SVG（Scalable Vector Graphics）是一种基于XML的矢量图像格式，它允许创建可缩放的、清晰的图形，无论放大多少倍都不会失真。在本案例中，“SVG图片剪辑路径鼠标悬停效果”是一个交互式的网页设计技术，通过...
SVG图片剪辑路径鼠标悬停效果特效代码
03-20
SVG（Scalable Vector Graphics）是一种基于XML的矢量图像格式，它允许创建可缩放且不失真的图形。在本文中，我们将深入探讨如何利用SVG的`clip-path`属性实现图片剪辑路径，并在鼠标悬停时展示图片内容的特效。这种...
svg地图数据可视化鼠标操作事件函数
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
08-17 534
地图对应的数据 /*svg地图*/ var classObj = [ {name: "qingqi", place: "青岐村委", color: "#f6510d", orgTotal: 987, orgPerson: "张三丰"}, {name: "mumian", place: "木棉村委", color: "#a07000", orgTotal: 187, orgPerson: "乔峰1"} ]; 执行操作事件 //执行操作.
svg添加不同效果的提示信息
05-22
SVG 意为可缩放矢量图形（Scalable Vector Graphics）,SVG 使用 XML 格式定义图像,因此使用常规的DOM对象是无法展示在SVG对象里面的，需要处理如提示信息。
js 运用svg绑定鼠标事件实现的黏皮糖效果
Stavin Li的博客
01-10 834
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="css/5.cs
SVG学习——8.鼠标点击连点成线
孰能无惑
08-09 678
效果如图 感言：蛮好玩的，就是记不住学不会！ <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>啦啦啦</title> <style> #div1 { width:400px; height:400px; background:white; } body { b
SVGDOM鼠标事件目标对象研究
firefight的专栏
05-08 2812
SVGDOM鼠标事件目标对象研究2007-05-08 创建  在DOM事件对象中target和currentTarget指明了用户操作的目标对象, 二者的区别在于, target是事件的最终接受者,而currentTarget是当前事件侦听器所在的节点.例如      在showTarget中, evt.currentTarget指向id为canvas的group, 因为事件侦听器设置
svg鼠标响应事件的四种方法(其中两种可支持火狐)
weixin_30649641的博客
10-10 176
svg鼠标响应事件的四种方法 鼠标响应事件的四种方法，以click事件为例。 Mouse Events - SMIL <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 200109...
利用svg实现简单的鼠标画线
weixin_44271874的博客
10-19 843
利用svg实现画线
svg 点击事件_公众号自定义样式，令人惊叹的文章编辑器，SVG篇
weixin_39850331的博客
12-10 725
本文首发在我的个人博客中：沧沧凉凉​www.cclliang.com这个系列居然还有第二期，我是没有想到的，虽然我的公众号已经放弃维护了，现在在搞我的博客。公众号自定义样式，令人惊叹的文章编辑器 - 个人博客|沧沧凉凉的小站​www.cclliang.com起因事情的起因是因为我无意之中看到了人家微信公众号的文章中有这样的效果：一个公众号中的文章，居然还能够实现这种效果，太不可思议了，于是马上开始...
SVG基础以及使用Javascript DOM操作SVG
热门推荐
多多
06-30 3万+
简介在HTML中使用SVG " style="">分组元素 解决text文本排版问题 通过Javascript DOM控制SVG 设置文本获取元素高宽和坐标事件处理自定义的z-index层级属性更多DOM API为什么不使用jQuery？ 简介 首先要明白SVG是基于XML格式定义图像的一种技术，并且是矢量的，也就是说在不同分辨率下都显示得很好。想到这里，有
svg图元鼠标滚轮控制size，初始化size为1（vue3）
最新发布
07-11
如果你想使用Vue 3来实现SVG图元的鼠标滚轮控制尺寸，并将初始尺寸设置为1，可以按照以下步骤进行操作： 1. 在Vue项目中安装`vue-svg-inline-loader`库，该库用于加载SVG文件并以内联方式显示。 ```bash npm install vue-svg-inline-loader ``` 2. 创建一个Vue组件，命名为`SvgElement.vue`，并在该组件中添加SVG图元。 ```html <template> <div> <svg ref="svgElement" v-html="svgCode" @wheel="handleWheel"></svg> </div> </template> <script> export default { data() { return { svgCode: '<circle cx="50" cy="50" r="50" fill="red"></circle>', size: 1 }; }, methods: { handleWheel(event) { event.preventDefault(); const delta = Math.sign(event.deltaY); if (delta > 0) { this.size += 0.1; } else { this.size -= 0.1; if (this.size < 0.1) { this.size = 0.1; } } this.updateSvgSize(); }, updateSvgSize() { const svgElement = this.$refs.svgElement; svgElement.style.width = `${this.size}rem`; svgElement.style.height = `${this.size}rem`; } }, mounted() { this.updateSvgSize(); } }; </script> <style scoped> svg { transition: width 0.2s, height 0.2s; } </style> ``` 3. 在你的Vue页面中使用`SvgElement`组件，并传递相应的SVG代码。 ```html <template> <div> <svg-element></svg-element> </div> </template> <script> import SvgElement from "@/components/SvgElement.vue"; export default { components: { SvgElement } }; </script> ``` 这样，当你在SVG元素上滚动鼠标滚轮时，尺寸会相应地增加或减小。初始尺寸为1，并且使用了Vue的响应式数据来实时更新SVG图元的大小。请确保已经安装了相关依赖并正确配置了Vue项目。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值