SVG里的几个动画元素的用法介绍
SVG是英文Scalable Vector Graphics的缩写,意为可缩放矢量图形。随着浏览器技术的进步,SVG在网页上的运用越来越多。SVG有很多优点,比如体积小、缩放时不失真、可以动态的改变,适合制作动画、格式可读,易于使用,搜索引擎优化等。
SVG在动画方面的表现格外优秀,本文主要是介绍SVG中的几个用于动画的元素,它们分别是:
我将用具有坚定的演示里让大家明白这几个元素的具体用法。
元素的用法介绍
元素通常放置到一个SVG图像元素里面,用来定义这个图像元素的某个属性的动画变化过程。我们需要制定动画的持续时间,以及属性值的初始值和变化后的值。
viewPort="0 0 120 120" version="1.1"
xmlns="http://www.w3.org/2000/svg">
attributeName="x"
from="-100" to="120"
dur="10s"
repeatCount="indefinite"/>
其中repeatCount属性的取值可以是一数字,也可以是“indefinite”,意为无限循环。
元素的用法介绍
元素也是放置一个图像元素里面,它可以引用一个事先定义好的动画路径,让图像元素按路径定义的方式运动。
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" >
stroke="lightgrey" stroke-
fill="none" id="theMotionPath"/>
用法介绍
元素对图形的运动和变换有更多的控制,它可以指定图形的变换、缩放、旋转和扭曲等。
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" >
attributeType="XML"
type="rotate"
from="0 60 70"
to="360 60 70"
dur="10s"
repeatCount="indefinite"/>
其中type属性的取值可以是translate | scale | rotate | skewX | skewY等。
元素的用法介绍
元素的用法在上面的例子里出现过,它是一个辅助元素,通过它,等元素可以引用一个外部的定义的。让图像元素按这个轨迹运动。
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" >
fill="none" stroke="blue" stroke- />
fill="none" stroke="blue" stroke-width="7.06" />
fill="yellow" stroke="red" stroke-width="7.06" >
上面这些演示了用到的只是一些常用的属性,这些元素里还有很多复杂的用法和各种各样的属性。以后会慢慢介绍给大家。