svg简介

矢量图和位图
矢量图：基于数学的描述
位图：基于像素点的描述
svg的使用
1、浏览器直接打开svg文件
2、通过IMG标签使用
3、通过SVG标签使用
4、作为CSS背景使用
基本图形和基本属性
基本图形：rect circle ellipse line polyline polygon
基本属性：
fill：填充色
stroke：描边色
stroke-width：描边宽度
transform：图形变换
rect
x：起点x
y：起点y
width：宽度
height：高度
rx：圆角x
ry：圆角y
circle
cx：圆心x
cy：圆心y
r：半径
ellipse
cx：圆心x
cy：圆心y
rx：半径x
ry：半径y
line
x1：起点x
y1：起点y
x2：终点x
y2：终点y
polyline
points：属性(xi, yi)+
xi：第i点x
yi：第i点y
 1 <svg xmlns="http://www.w3.org/2000/svg">
 2     <rect
 3         x="10"
 4         y="10"
 5         rx="5"
 6         ry="5"
 7         width="200"
 8         height="200"
 9         stroke="red"
10         fill="none"/>
11 
12     <circle
13         cx="320"
14         cy="110"
15         r="100"
16         stroke="red"
17         fill="none"/>
18 
19     <ellipse 
20         cx="530"
21         cy="110"
22         rx="100"
23         ry="80"
24         stroke="red"
25         fill="none"/>
26 
27     <line
28         x1="10"
29         y1="220"
30         x2="200"
31         y2="420"
32         stroke="red"/>
33 
34     <polyline 
35         points="220 220 420 320 220 420"
36         fill="none"
37         stroke="red"/>
38 
39     <polygon 
40         points="440 220 640 320 440 420" 
41         fill="none" 
42         stroke="red"/>
43 </svg>

 

svg api接口
创建图形：document.createElementNS(ns, tagName)
添加图形：appendChild(element)
获取属性：getAttribute(attr)
设置属性：setAttribute(attr, val)
posted @ 2015-04-11 11:59  tyxloveyfq  阅读(205)  评论(0)  编辑  收藏  举报