通过SVG创建动态的太阳系行星动画,我可以用 SVG 创建自己的宇宙吗。不行?至少可以自己创建太阳、地球和月球,甚至彗星!让我们先看看下面的 SVG 例子能干什么,然后我们会修改代码并查看更新后的效果。
原文:http://dev.opera.com/articles/view/using-animatemotion-in-svg/
你可以用 SVG 创建自己的宇宙。不行?至少你可以自己创建太阳、地球和月球,甚至彗星!让我们先看看下面的 SVG 例子能干什么,然后我们会修改代码并查看更新后的效果。
在 SVG 上点击右键并选择查看源代码。在这个微型太阳系中,每一秒代表实际一天。此 SVG 使用了animateMotion来让地球、月球和彗星运动。
月球的运行遵循 path2 椭圆;地球遵循 path1 椭圆曲线运行。可以通过 d 属性改变运行路径。让我们通过改变 path 代码把月球运行方向倒过来,从
d='M390,80 h 0 a50,19 0 1,0 1,1 z'
^location ^orbit ^direction
变为
d='M300,90 h 0 a50,15 0 1,1 1,1 z'
宇宙不能缺少星星,让我们通过设置 PNG 背景来添加一些星星。
<image xlink:href'Stars.png' x='0' y='0' width='1000' height='800' />
你现在有了你自己的宇宙。你可以让它变得更好。
(THE END)
如果你喜欢这篇文章,请阅读本文相关的下列内容:
