2007-11-17

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

查看完整版本 : 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
评论
发表评论

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

jacally
搜索本博客
我的相册
5225c084-f830-3bfb-89b4-e391c07b2221-thumb
flexlib6-1.jpg
共 27 张
最近加入圈子
存档
最新评论