SVG意为可缩放矢量图形，svg的图片与普通的jpg,png等图片相比，其优势在于不失真。一般普通的图片放大后，会呈现出锯齿的形状，但是svg图片则不会这样，它可以被高质量地打印。

现在就用dreamweaver制作一个简单的svg动画，用来表示太阳系。

分享代码如下：

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>太阳系</title>

 </head>

 <body>

 <svg width="100%" height="100%">

 <defs>

 <g id="E" transform="translate(-340,-90)">

     <image xlink:href="image/earth.gif" x="330" y="75" height="30px" width="30px"></image>

     <path id="path2" d="M390,80 h 0 a50,19 0 1,0 1,1 z" fill="none" stroke="white" stroke-width="1"/>

     <circle cx="0" cy="0" r="5" fill="white" stroke="black" stroke-width="1" >

            <animateMotion dur="30s" repeatCount="indefinite">

             <mpath xlink:href="#path2" />

         </animateMotion>

     </circle>

 </g>

 <radialGradient id="sunfill" cx="50%" cy="50%" r="100%">

     <stop stop-color="#FF0000" offset="0%" stop-opacity="1"/>

     <stop stop-color="#FBF900" offset="95%" stop-opacity="1"/>

     <stop stop-color="#FFFFFF" offset="100%" stop-opacity="1"/>

 </radialGradient>

 </defs>

     <rect x="0" y="0" width="100%" height="100%" fill="black" />

     <circle cx="660" cy="250" r="60" fill="url(#sunfill)" />

     <path id="path1" d="M1200,200 h 0 a600,200 0 1,0 1,1 z" fill="none" stroke="white" stroke-width="1"/>

     <use x="0" y="0" xlink:href="#E">

     <animateMotion dur="365s" repeatCount="indefinite" >

         <mpath xlink:href="#path1" />

     </animateMotion>

     </use>

    </svg>

   </body>

 </html>

SUN

在这段代码中，地球的自转图是在网上下载的，然后，月亮，太阳以及轨道线都是用代码画出来的。

<g>该标签将地球与月亮化为一体，当作一个整体，然后再与太阳合在一起。

transform 则是表示转动。

radialGradient 这个则表示渐变。赋予一个id，然后将其和太阳联系起来，这里用的是：fill=“url(#sunfill)”。

animateMotion 这个是让月亮绕着地球动的属性。

最后的效果图如下：

这里所显示的是截取的部分时间，然后出现的效果。

svg动画 之 我的自制太阳系的更多相关文章

  1. SVG动画

    动画原理 SVG动画,就是元素的属性值关于时间的变化. 如下图来说,元素的某个属性值的起始值(from)到结束值(to)在一个时间段(duration)根据时间函数(timing-function)计 ...

  2. 推荐8个实现 SVG 动画的 JavaScript 库

    SVG 是一种分辨率无关的图形(矢量图形).这意味着它在任何类型的屏幕都不会遭受任何质量损失.除此之外,你可以让 SVG 灵活现一些动画效果.这篇文章就给大家推荐8个实现 SVG 动画的 JavaSc ...

  3. 使用 SVG 动画实现弹性的页面元素效果

    Codrops 分享了一些给SVG元素加上弹性动画的灵感.实现的思路是把一个SVG元素整合成一个组件,然后从一个路径弹性动画到另一个.这种效果可以应用到像菜单,按钮或其它元素,使得交互更有趣,看起更原 ...

  4. Walkway.js – 用线条制作简约的 SVG 动画

    Walkway.js 是一个使用线条和路径元素组成 SVG 动画图像的简单方法.只需根据提供的配置对象创建一个新的 Walkway 实例就可以了.这种效果特别适合那些崇尚简约设计风格的网页.目前, W ...

  5. 带给你灵感：30个超棒的 SVG 动画展示【上篇】

    前端开发人员和设计师一般使用 CSS 来创建 HTML 元素动画.然而,由于 HTML 在创建图案,形状,和其他方面的局限性,它们自然的转向了 SVG,它提供了更多更有趣的能力.借助SVG,我们有更多 ...

  6. 带给你灵感：30个超棒的 SVG 动画展示【下篇】

    前端开发人员和设计师一般使用 CSS 来创建 HTML 元素动画.然而,由于 HTML 在创建图案,形状,和其他方面的局限性,它们自然的转向了 SVG,它提供了更多更有趣的能力.借助 SVG,我们有更 ...

  7. HTML5的 2D SVG和SVG DOM的学习笔记（2）---SVG动画

    SVG支持动画.可以通过以下几种方法获得动画效果: 使用SVG动画元素.SVG可以描述随时间变化的图形对象,使用不同的动画元素可以定义运动路径,淡入淡出效果和对象的膨胀.收缩.旋转和变换颜色. 使用S ...

  8. SVG动画实践篇-模拟音量高低效果

    git 地址:https://github.com/rainnaZR/svg-animations/tree/master/src/demo/step2/volumn 说明 这个动画的效果就是多个线条 ...

  9. 借助Bodymovin播放svg动画

    svg动画,截取工具有点不忍直视了~~~ 为了实现上面的svg动画,可以使用bodymovin插件,简单配置之后,就可以直接可以实现在 AE(可视化操作,不用码代码)上面导出 svg的json数据,在 ...

随机推荐

  1. Python——函数入门（三）

    一.变量作用域 当程序定义一个变量时,这个变量是有它的作用范围的,变量的作用范围称为变量的作用域.根据变量的位置,分为两种: 局部变量:局部变量就是在函数中定义的变量,包括参数,都是局部变量,局部离开 ...

  2. React后台管理系统-用户列表页面

    1.页面的结构 //遍历list, 返回数据       let listBody= this.state.list.map((user,index)=> {           return ...

  3. WordPress免费清新响应式博客/杂志/图片三合一主题Nana

    WordPress免费清新响应式博客/杂志/图片三合一主题Nana 一.主题安装须知 1.本主题必须安装文章点击统计插件:WP-PostViews,可以直接在后台插件→安装插件中直接搜索安装官方最新版 ...

  4. 讲说问题：|和||的区别以及&和&&的区别。2、Java中的数据类型分几类?基本数据类型有哪些?

    |和||的区别以及&和&&的区别. |或 为或运算 判断为逻辑或 || 为短路或 只有逻辑判断 当左侧为真不再继续判断 &与 为与运算 判断为逻辑与 && ...

  5. dom节点获取文本的方式

    1. innerHTML innerHTML可以作为获取文本的方法也可以作为修改文本内容的方法 element.innerHTML 会直接返回element节点下所有的HTML化的文本内容 <b ...

  6. 7- vue django restful framework 打造生鲜超市 -商品类别数据展示(上)

    Vue+Django REST framework实战 搭建一个前后端分离的生鲜超市网站 Django rtf 完成 商品列表页 并没有将列表页的数据json 与前端的页面展示结合起来 讲解如果将dr ...

  7. k8s基于RBAC的访问控制（用户授权）

    kubernetes的API Server常用的授权插件有:   Node.ABAC.RBAC.Webhook我们重点说一下RBAC的访问控制逻辑RBAC(Role base access contr ...

  8. LigerUI 快速开发UI框架 链接

    LigerUI 快速开发UI框架 http://www.ligerui.com/ jQuery ligerUI 中文官方网站 http://www.ligerui.com/demo.html

  9. centos7.3网络配置

    一.关闭NetworkManager 默认状态下最小化安装使用NetworkManager这个服务来控制联网的,但是这个配置在配置生产环境服务器时一般不会使用,而是使用系统自带的network服务,更 ...

  10. Patrick and Shopping

    Patrick and Shopping 今天 Patrick 等待着他的朋友 Spongebob 来他家玩.为了迎接 Spongebob,Patrick 需要去他家附近的两家商店  买一些吃的.他家 ...