svg动画的学习相关

一、svg相关

1.主要标签

1）矩形

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

2）圆形

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

r 半径。

3）椭圆

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

4）线

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

5）折线

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

6）多边形

举个栗子:

7）路径

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

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

官网上的栗子拿来一用：

8）各种滤镜 
官网栗子：

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

2）