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)