1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
---
title: 基本形状
slug: Web/SVG/Tutorial/Basic_Shapes
tags:
- SVG
- 'SVG:教程'
translation_of: Web/SVG/Tutorial/Basic_Shapes
---
<p> {{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}</p>
<p>这里介绍的几个基本的形状用于大多数的SVG绘图。通过这些形状的命名可以知道其用途。给它们一些属性可以确定它们的位置和大小，但一个元素参考可能包含对元素属性的更准确和完整的描述，这里先不做介绍。然而，由于有些元素可以用在大多数SVG文档中，所以很有必要在这里介绍这部分元素。</p>
<h2 id="Basic_shapes" name="Basic_shapes">基本形状</h2>
<p>要想插入一个形状，你可以在文档中创建一个元素。不同的元素对应着不同的形状，并且使用不同的属性来定义图形的大小和位置。有一些形状因为可以由其他的形状创建而略显冗余， 但是它们用起来方便，可让我们的SVG文档简洁易懂。右边的图片展示了所有的基本形状。生成它们的代码如下：</p>
<p> <img alt="" src="https://developer.mozilla.org/@api/deki/files/359/=Shapes.png"></p>
<pre><?xml version="1.0" standalone="no"?>
<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
<circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
<ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>
<line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>
<polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
stroke="orange" fill="transparent" stroke-width="5"/>
<polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
stroke="green" fill="transparent" stroke-width="5"/>
<path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
</svg></pre>
<div class="note">
<p><strong>注意：</strong><code>stroke</code>、<code>stroke-width</code> <code>和fill</code> 等属性在后面的章节中解释。</p>
</div>
<h3 id="Rectangles" name="Rectangles">矩形</h3>
<p>就像你能联想到的，<code>rect</code>元素会在屏幕上绘制一个矩形 。其实只要6个基本属性就可以控制它在屏幕上的位置和形状。 上面的图例中最先展示了2个矩形，虽然这有点冗余了。右边的那个图形设置了rx和ry属性用来控制圆角。如果没有设置圆角，则默认为0。</p>
<pre><rect x="10" y="10" width="30" height="30"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/></pre>
<dl>
<dt>x</dt>
<dd>矩形左上角的x位置</dd>
<dt>y</dt>
<dd>矩形左上角的y位置</dd>
<dt>width</dt>
<dd>矩形的宽度</dd>
<dt>height</dt>
<dd>矩形的高度</dd>
<dt>rx</dt>
<dd>圆角的x方位的半径</dd>
<dt>ry</dt>
<dd>圆角的y方位的半径</dd>
</dl>
<h3 id="Circle" name="Circle">圆形 </h3>
<p>正如你猜到的，<code>circle</code>元素会在屏幕上绘制一个圆形。它只有3个属性用来设置圆形。</p>
<pre><circle cx="25" cy="75" r="20"/></pre>
<dl>
<dt>r</dt>
<dd>圆的半径</dd>
<dt>cx</dt>
<dd>圆心的x位置</dd>
<dt>cy</dt>
<dd>圆心的y位置</dd>
</dl>
<h3 id="Ellipse" name="Ellipse">椭圆</h3>
<p><a href="/en-US/Web/SVG/Element/ellipse" title="en-US/Web/SVG/Element/ellipse">Ellipse</a> 是<code>circle</code>元素更通用的形式，你可以分别缩放圆的x半径和y半径（通常数学家称之为长轴半径和短轴半径）。</p>
<pre><ellipse cx="75" cy="75" rx="20" ry="5"/></pre>
<dl>
<dt>rx</dt>
<dd>椭圆的x半径</dd>
<dt>ry</dt>
<dd>椭圆的y半径</dd>
<dt>cx</dt>
<dd>椭圆中心的x位置</dd>
<dt>cy</dt>
<dd>椭圆中心的y位置</dd>
</dl>
<h3 id="线条">线条</h3>
<p><a href="/en-US/Web/SVG/Element/line" title="en-US/Web/SVG/Element/line">Line</a> 绘制直线。它取两个点的位置作为属性，指定这条线的起点和终点位置。</p>
<pre><line x1="10" x2="50" y1="110" y2="150"/></pre>
<dl>
<dt>x1</dt>
<dd>起点的x位置</dd>
<dt>y1</dt>
<dd>起点的y位置</dd>
<dt>x2</dt>
<dd>终点的x位置</dd>
<dt>y2</dt>
<dd>终点的y位置</dd>
</dl>
<h3 id="Polyline" name="Polyline">折线</h3>
<p><a href="/en-US/Web/SVG/Element/polyline" title="en-US/Web/SVG/Element/polyline">Polyline</a>是一组连接在一起的直线。因为它可以有很多的点，折线的的所有点位置都放在一个points属性中：</p>
<pre><polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/></pre>
<dl>
<dt>points</dt>
<dd>点集数列。每个数字用空白、逗号、终止命令符或者换行符分隔开。每个点必须包含2个数字，一个是x坐标，一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”。</dd>
</dl>
<h3 id="Polygon" name="Polygon">多边形</h3>
<p><code><a href="https://developer.mozilla.org/en/SVG/Element/polygon" title="en/SVG/Element/polygon">polygon</a></code>和折线很像，它们都是由连接一组点集的直线构成。不同的是，<code>polygon</code>的路径在最后一个点处自动回到第一个点。需要注意的是，矩形也是一种多边形，如果需要更多灵活性的话，你也可以用多边形创建一个矩形。</p>
<pre><polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/></pre>
<dl>
<dt>points</dt>
<dd>点集数列。每个数字用空白符、逗号、终止命令或者换行符分隔开。每个点必须包含2个数字，一个是x坐标，一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”。路径绘制完后闭合图形，所以最终的直线将从位置(2,2)连接到位置(0,0)。</dd>
</dl>
<h3 id="Path" name="Path">路径</h3>
<p><code>path</code>可能是SVG中最常见的形状。你可以用path元素绘制矩形（直角矩形或者圆角矩形）、圆形、椭圆、折线形、多边形，以及一些其他的形状，例如贝塞尔曲线、2次曲线等曲线。因为path很强大也很复杂，所以会在<a href="https://developer.mozilla.org/en/SVG/Tutorial/Paths" title="en/SVG/Tutorial/Paths">下一章</a>进行详细介绍。这里只介绍一个定义路径形状的属性。</p>
<pre><path d="M 20 230 Q 40 205, 50 230 T 90230"/></pre>
<dl>
<dt>d</dt>
<dd>一个点集数列以及其它关于如何绘制路径的信息。请阅读<a href="https://developer.mozilla.org/en-US/Web/SVG/Tutorial/Paths" title="en-US/Web/SVG/Tutorial/Paths">Paths</a> 章节以了解更多信息。</dd>
</dl>
<p>{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}</p>
|
