新书推介:《语义网技术体系》
作者:瞿裕忠,胡伟,程龚
   XML论坛     W3CHINA.ORG讨论区     计算机科学论坛     SOAChina论坛     Blog     开放翻译计划     新浪微博  
 
  • 首页
  • 登录
  • 注册
  • 软件下载
  • 资料下载
  • 核心成员
  • 帮助
  •   Add to Google

    >> 本版讨论SVG, GML, X3D, VRML, VML, XAML, AVALON, Batik等基于XML的图形技术,以及有关GIS的应用。
    [返回] 中文XML论坛 - 专业的XML技术讨论区XML.ORG.CN讨论区 - 高级XML应用『 SVG/GML/VRML/X3D/XAML 』 → svg鼠标响应事件的四种方法 查看新帖用户列表

      发表一个新主题  发表一个新投票  回复主题  (订阅本版) 您是本帖的第 11574 个阅读者浏览上一篇主题  刷新本主题   平板显示贴子 浏览下一篇主题
     * 贴子主题: svg鼠标响应事件的四种方法 举报  打印  推荐  IE收藏夹 
       本主题类别:     
     wanghai00 帅哥哟,离线,有人找我吗?魔羯座2000-12-31
      
      
      威望:4
      等级:大四(总算啃完XML规范了)
      文章:108
      积分:1085
      门派:XML.ORG.CN
      注册:2005/10/1

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给wanghai00发送一个短消息 把wanghai00加入好友 查看wanghai00的个人资料 搜索wanghai00在『 SVG/GML/VRML/X3D/XAML 』的所有贴子 点击这里发送电邮给wanghai00  访问wanghai00的主页 引用回复这个贴子 回复这个贴子 查看wanghai00的博客楼主
    发贴心情 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"
              onclick="changeColor(evt)"/>
    </svg>

    实例演示:

    [URL=http://www.kevlindev.com/tutorials/basics/events/mouse/svg_js/onclick.svg]http://www.kevlindev.com/tutorials/basics/events/mouse/svg_js/onclick.svg[/URL]

    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 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"><![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 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"><![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


       收藏   分享  
    顶(0)
      




    ----------------------------------------------
    交流提高呀!

    svg技术交流: 
    http://greaterthanme.blog.hexun.com/list.aspx?
    tag=svg
    svg技术交流群:24785607
    svg文件共享邮箱:svgcn@126.com  
    password:svg.net.cn

    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2006/4/16 14:45:00
     
     GoogleAdSense魔羯座2000-12-31
      
      
      等级:大一新生
      文章:1
      积分:50
      门派:无门无派
      院校:未填写
      注册:2007-01-01
    给Google AdSense发送一个短消息 把Google AdSense加入好友 查看Google AdSense的个人资料 搜索Google AdSense在『 SVG/GML/VRML/X3D/XAML 』的所有贴子 点击这里发送电邮给Google AdSense  访问Google AdSense的主页 引用回复这个贴子 回复这个贴子 查看Google AdSense的博客广告
    2024/7/12 22:47:34

    本主题贴数4,分页: [1]

     *树形目录 (最近20个回帖) 顶端 
    主题:  svg鼠标响应事件的四种方法(5277字) - wanghai00,2006年4月16日
        回复:  还蛮不错的,谢谢楼主了(22字) - mlmzw,2007年8月11日
        回复:  bucuo(5字) - qsc800528,2007年8月2日
        回复:  第1种方法和第3种方法在firefox下不能解释不错不错 正是我想要的..(62字) - wyb_cn,2006年8月17日

    W3C Contributing Supporter! W 3 C h i n a ( since 2003 ) 旗 下 站 点
    苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》
    8,546.875ms