line
svg里的line标签是用来定义线段的，我们想一下，要定义一个线段需要哪些属性呢？无非就是起点坐标和终点坐标吧，两点确定一条直线嘛，因此line标签的属性也是相当简单。
新建一个line.svg:
|
1
2
3
4
5
6
7
8
9
10
11
|
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<line x1="10" y1="10" x2="200" y2="200"
style="stroke:rgb(99,99,99);stroke-width:2"/>
</svg>
|
使用embed标签把line.svg嵌入到index.html中：
|
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
</head>
<body>
<embed src="line.svg" width="500" height="300" type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
</body>
</html>
|
页面显示效果如下：
解释一下line的各个属性的含义：
x1：定义线段起点的x坐标
y1 ：定义线段起点的y坐标
x2 ：定义线段终点的x坐标
y2：定义线段终点的y坐标
ellipse椭圆
svg里面的椭圆ellipse跟cricle很相似，是用来构造椭圆的。我们依然是通过一个例子来熟悉一下ellipse的属性和css样式。
新建一个tuoyuan.svg,内容如下：
|
1
2
3
4
5
6
7
8
|
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);stroke:rgb(0,0,100);stroke-width:2"/>
</svg>
|
在index.html中引入这个tuoyuan.svg:
|
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
</head>
<body>
<embed src="tuoyuan.svg" width="500" height="300" type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
</body>
</html>
|
浏览器打开index.html，展示的效果是下面这个样子的：
看一下里面使用到的属性：
cx ：定义椭圆ellipse圆点的 x 坐标
cy ：定义椭圆ellipse圆点的 y 坐标
rx ：定义椭圆ellipse的水平半径
ry ：定义椭圆ellipse的垂直半径
circle里面只有一个半径r，要定义椭圆ellipse自然需要水平半径和垂直半径了，这是很好理解的。
椭圆里面可以用的属性也就这么多了，css样式都是和前边介绍过的rect和circle类似的。
polyline
svg里面的polyline标签用于定义折线，是仅包含直线片段的折线，跟polygon多边形很类似，只有一个属性points可用，points里面定义的是每个折点的坐标，一个折点的x和y坐标通过","分开，每个折点之间通过空格隔开即可。
一个简单的例子，新建polyline.svg:
|
1
2
3
4
5
6
7
8
9
10
11
|
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-width:2"/>
</svg>
|
运行结果：
多边形polygon
svg的polygon标签用于创建一个不少于三个边的多边形，只有一个属性points，让我们来看看我们如何使用polygon来创建一三角形呢？
新建polygon.svg，编辑内容如下：
|
1
2
3
4
5
6
7
8
|
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<polygon points="220,100 300,210 170,250"
style="fill:#123456;stroke:blue;stroke-width:2"/>
</svg>
|
在index.html引入polygon.svg，并使用浏览器打开index.html:
|
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
</head>
<body>
<embed src="polygon.svg" width="500" height="300" type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
</body>
</html>
|
points 属性定义多边形每个角的 x 和 y 坐标,x和y之间通过","隔开，每个点之间通过空格隔开。
