新书推介：《语义网技术体系》
作者：瞿裕忠，胡伟，程龚
   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中的动画技术(2) ◇查看新帖 ◇ 用户列表 ◇

      发表一个新主题  发表一个新投票  回复主题  (订阅本版) 您是本帖的第 6587 个阅读者浏览上一篇主题  刷新本主题   树形显示贴子　浏览下一篇主题
     * 贴子主题： SVG中的动画技术(2) 举报  打印  推荐  IE收藏夹 
       本主题类别:     
     卷积内核 帅哥哟，离线，有人找我吗？
      
      
      威望：8
      头衔：总统
      等级：博士二年级(版主)
      文章：3942
      积分：27590
      门派：XML.ORG.CN
      注册：2004/7/21

    姓名：(无权查看)
    城市：(无权查看)
    院校：(无权查看)
    给卷积内核发送一个短消息 把卷积内核加入好友 查看卷积内核的个人资料 搜索卷积内核在『 SVG/GML/VRML/X3D/XAML 』的所有贴子 访问卷积内核的主页 引用回复这个贴子 回复这个贴子 查看卷积内核的博客楼主
    发贴心情 SVG中的动画技术(2)

    SVG中的动画技术(2)
    下面再看一个沿指定路径运动的例子：

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
    <svg width="500" height="300" viewBox="0 0 500 300"
    xmlns="http://www.w3.org/2000/svg">
    <desc>沿路径运动的例子</desc>
    <defs>
    <!-- 下面定义渐变颜色 -->
    <linearGradient id="grad1" x1="0" y1="0" x2="0" y2="100%" gradientUnits="userSpace">
    <stop offset="0%" style="stop-color: #88f;"/>
    <stop offset="100%" style="stop-color: #008;"/>
    </linearGradient>
    </defs>
    <rect x="1" y="1" width="498" height="298"
    fill="none" stroke="blue" stroke-width="2" />

    <!-- 下面的代码画出一个路径 -->
    <path d="M100,250 C 100,50 400,50 400,250"
    fill="none" stroke="blue" stroke-width="8" />

    <!-- 下面的这个圆将沿着定义的轨迹运动 -->
    <circle r="25" style="fill:url(#grad1)">
    <!-- 定义动画的运动轨迹 -->
    <animateMotion dur="6s" repeatCount="indefinite"
    path="M100,250 C 100,50 400,50 400,250" rotate="auto" />
    </circle>
    <text x="145" y="285" style="font-size:12pt">http://lucky.myrice.com</text>
    </svg>

        上面的例子应用了animateMotion动画元素，其属性设定和前面类似。该例子的效果如图所示：


        SVG DOM产生动画的方式是由脚本语言调用DOM对象的属性和方法实现的，在SVG中使用脚本语言和HTML中类似，首先是指定脚本的语言类型：有两种办法可以指定脚本的语言类型

    1），在SVG元素里使用contentScriptType属性，可以指定整个文档里使用的缺省脚本语言类型。
    语法如下：
    <svg contentScripttype="content-type">
    content-type指定一种媒体类型，默认是"text/ecmascript"
    2），在script元素里使用type属性来声明该段脚本所使用的语言类型。
    语法如下：
    <script type="content-type">
    content-type就是所使用的媒体类型。

        SVG里的script元素和HTML里的完全一致。任何script元素里定义的函数都可以应用到整个文档里，也可以通过xlink:href属性，指定一个脚本文件的URL地址，比如：<script type="text/JavaScript" xlink:href="test.js"></script>


       收藏   分享  
    顶(0)
      




    ----------------------------------------------
    事业是国家的，荣誉是单位的，成绩是领导的，工资是老婆的，财产是孩子的，错误是自己的。

    点击查看用户来源及管理<br>发贴IP：*.*.*.* 2004/9/27 15:10:00
     
     thomsonjin 帅哥哟，离线，有人找我吗？
      
      
      等级：大一(猛啃高等数学)
      文章：15
      积分：135
      门派：XML.ORG.CN
      注册：2004/10/29

    姓名：(无权查看)
    城市：(无权查看)
    院校：(无权查看)
    给thomsonjin发送一个短消息 把thomsonjin加入好友 查看thomsonjin的个人资料 搜索thomsonjin在『 SVG/GML/VRML/X3D/XAML 』的所有贴子 引用回复这个贴子 回复这个贴子 查看thomsonjin的博客第2楼
    发贴心情 
    挺漂亮的，但需要存为utf-8格式才能看
    点击查看用户来源及管理<br>发贴IP：*.*.*.* 2004/11/2 15:32:00
     
     zhiyu-2000 美女呀，离线，快来找我吧！
      
      
      等级：大三(面向对象是个好东东!)
      文章：77
      积分：547
      门派：XML.ORG.CN
      注册：2004/12/3

    姓名：(无权查看)
    城市：(无权查看)
    院校：(无权查看)
    给zhiyu-2000发送一个短消息 把zhiyu-2000加入好友 查看zhiyu-2000的个人资料 搜索zhiyu-2000在『 SVG/GML/VRML/X3D/XAML 』的所有贴子 引用回复这个贴子 回复这个贴子 查看zhiyu-2000的博客第3楼
    发贴心情 
    别的svg文件我都可以打开，为什么这个我看不了呀？
    是不是因为我没有存为utf-8格式呀

    那到底怎样存为utf-8格式呢？

    点击查看用户来源及管理<br>发贴IP：*.*.*.* 2004/12/8 9:55:00
     
     卷积内核 帅哥哟，离线，有人找我吗？
      
      
      威望：8
      头衔：总统
      等级：博士二年级(版主)
      文章：3942
      积分：27590
      门派：XML.ORG.CN
      注册：2004/7/21

    姓名：(无权查看)
    城市：(无权查看)
    院校：(无权查看)
    给卷积内核发送一个短消息 把卷积内核加入好友 查看卷积内核的个人资料 搜索卷积内核在『 SVG/GML/VRML/X3D/XAML 』的所有贴子 访问卷积内核的主页 引用回复这个贴子 回复这个贴子 查看卷积内核的博客第4楼
    发贴心情 
    要安装svgviewer插件才可以看的.我给你传到网上个,在下面我的网站上下载试试吧


    [此贴子已经被作者于2004-12-8 20:05:38编辑过]

    ----------------------------------------------
    事业是国家的，荣誉是单位的，成绩是领导的，工资是老婆的，财产是孩子的，错误是自己的。

    点击查看用户来源及管理<br>发贴IP：*.*.*.* 2004/12/8 19:21:00
     
     zhiyu-2000 美女呀，离线，快来找我吧！
      
      
      等级：大三(面向对象是个好东东!)
      文章：77
      积分：547
      门派：XML.ORG.CN
      注册：2004/12/3

    姓名：(无权查看)
    城市：(无权查看)
    院校：(无权查看)
    给zhiyu-2000发送一个短消息 把zhiyu-2000加入好友 查看zhiyu-2000的个人资料 搜索zhiyu-2000在『 SVG/GML/VRML/X3D/XAML 』的所有贴子 引用回复这个贴子 回复这个贴子 查看zhiyu-2000的博客第5楼
    发贴心情 
    卷积内核：
           谢谢你！
    不过不是因为我没有装插件，插件早就装了。
    我把这段代码放在Editplus里，然后转存为utf-8格式就可以看了
    奇怪，只是注释里面有汉字，而要显示的动画并没有汉字，为什么还必须转存为utf-8呢？
    非常不解！
    你长时间才上来一次呀？我还有好多问题要问你呢！
    留个联系方式吧！
    点击查看用户来源及管理<br>发贴IP：*.*.*.* 2004/12/9 16:26:00
     
     zhiyu-2000 美女呀，离线，快来找我吧！
      
      
      等级：大三(面向对象是个好东东!)
      文章：77
      积分：547
      门派：XML.ORG.CN
      注册：2004/12/3

    姓名：(无权查看)
    城市：(无权查看)
    院校：(无权查看)
    给zhiyu-2000发送一个短消息 把zhiyu-2000加入好友 查看zhiyu-2000的个人资料 搜索zhiyu-2000在『 SVG/GML/VRML/X3D/XAML 』的所有贴子 引用回复这个贴子 回复这个贴子 查看zhiyu-2000的博客第6楼
    发贴心情 
    卷积内核：
       如果不想在这里告诉我的话，就发到我的邮箱里吧！
       zhiyu-200@163.com
    点击查看用户来源及管理<br>发贴IP：*.*.*.* 2004/12/9 16:33:00
     
     GoogleAdSense
      
      
      等级：大一新生
      文章：1
      积分：50
      门派：无门无派
      院校：未填写
      注册：2007-01-01
    给Google AdSense发送一个短消息 把Google AdSense加入好友 查看Google AdSense的个人资料 搜索Google AdSense在『 SVG/GML/VRML/X3D/XAML 』的所有贴子 访问Google AdSense的主页 引用回复这个贴子 回复这个贴子 查看Google AdSense的博客广告
    2024/5/10 11:02:12

    本主题贴数6，分页： [1]

    管理选项： 修改tag | 锁定 | 解锁 | 提升 | 删除 | 移动 | 固顶 | 总固顶 | 奖励 | 惩罚 | 发布公告
    W3C Contributing Supporter! W 3 C h i n a ( since 2003 ) 旗 下 站 点
    苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》
    		 78.125ms