svg动画的学习相关

一、svg相关

1.主要标签

1）矩形 <rect>

stroke-width 属性定义矩形边框的宽度；
stroke 属性定义矩形边框的颜色；
opacity 属性定义整个元素的透明值（合法的范围是：0 - 1）；
rx 和 ry 属性可使矩形产生圆角。

2）圆形 <circle>

cy,cx 圆心坐标 默认(0,0)；

r 半径。

3）椭圆 <ellipse>

rx  水平半径；
ry  垂直半径。

4）线 <line>

x1 y1 开始坐标；
x2 y2 结束坐标。
说明：line所画的图形为直线而非折线，所以没有x3，y3属性==没有第三个点。

5）折线 <polyline>

points 属性定义多边形每个角的 x 和 y 坐标。

6）多边形 <polygon>

举个栗子:

<polygon points="500,600 300,200 100,900 500,400" style="fill:#33222a;stroke:#41aaaa;stroke-width:2"/>
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"style="fill:none;stroke:red;stroke-width:2;opacity:1"/>

7）路径 <path>

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath

大写是绝对位置，小写是相对位置。

官网上的栗子拿来一用：

<path d="M153 334
C153 334 151 334 151 334
C151 339 153 344 156 344
C164 344 171 339 171 334
C171 322 164 314 156 314
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274"
style="fill:white;stroke:red;stroke-width:2"/>

8）各种滤镜 
官网栗子：

<defs xmlns="http://www.w3.org/2000/svg">
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
</filter>
</defs>
<circle cx="400" cy="400" r="200" style="fill:#ff0000;stroke:#000000; stroke-width:2;filter:url(#Gaussian_Blur)"/>

2.三种方法外部接入svg
1）<embed> 标签被所有主流的浏览器支持，并允许使用脚本。
注释：当在 HTML 页面中嵌入 SVG 时使用 <embed> 标签是 Adobe SVG Viewer 推荐的方法！然而，如果需要创建合法的 XHTML，就不能使用 <embed>。任何 HTML 规范中都没有 <embed> 标签
语法：
<embed src="rect.svg" width="300" height="100" 
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

2）<object> 标签是 HTML 4 的标准标签，被所有较新的浏览器支持。它的缺点是不允许使用脚本。
注释：假如您安装了最新版本的 Adobe SVG Viewer，那么当使用 <object> 标签时 SVG 文件无法工作（至少不能在 IE 中工作）！
语法：
<object data="rect.svg" width="300" height="100" 
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

3）<iframe> 标签可工作在大部分的浏览器中。
语法：
<iframe src="rect.svg" width="300" height="100">
</iframe>

二、动画相关

1主要组件

1）set
set意思设置，此元素没有动画效果。可以进行延时设置。
2.）animate
基础动画元素。实现单属性的动画过渡效果。
3.）animateColor
颜色动画。不过，animate可以实现其功能与效果，因此，此属性已经被废弃。
4.）animateTransform
变换动画效果的。

translate
scale  更改大小
rotate 旋转
skewX
skewY
5.）animateMotion
animateMotion元素可以让SVG各种图形沿着特定的path路径运动。

2属性说明

举栗说明

<g>
	<circle id="black" cx="160" cy="160" r="4"  stroke-width="none" fill="black"/>
	<circle cx="740" cy="240" r="3"  stroke-width="none" fill="white"/>
<span style="white-space:pre">	</span><animateTransform attributeName="transform" begin="black.click" dur="2s" fill="freeze" type="rotate" values="0 400 400;90 400 400;100 400 400"  repeatCount="1"/>

</g>

attributeName

要更改的属性名

from, to, values,

所改变的数量

begin,

开始时刻

 

dur

经过一段动画的所用时间

repeatCount

重复次数

fill=freeze|remove
freeze：结束后画面为结束画面 不回到开始画面，
remove：结束后回到开始画面（默认）。

注：部分摘要未注明出处，不是故意侵权，给您造成麻烦请联系我。