利⽤SVGpath绘制图形--基本图形
这⾥介绍的⼏个基本的形状⽤于⼤多数的SVG绘图。通过这些形状的命名可以知道其⽤途。给它们⼀些属性可以确定它们的位置和⼤⼩，但⼀个元素参考可能包含对元素属性的更准确和完整的描述，这⾥先不做介绍。然⽽，由于有些元素可以⽤在⼤多数SVG⽂档中，所以很有必要在这⾥介绍这部分元素。
基本形状
要想插⼊⼀个形状，你可以在⽂档中创建⼀个元素。不同的元素对应着不同的形状，并且使⽤不同的属性来定义图形的⼤⼩和位置。有⼀些形状因为可以由其他的形状创建⽽略显冗余，但是它们⽤起来⽅便，可让我们的SVG⽂档简洁易懂。右边的图⽚展⽰了所有的基本形状。⽣成它们的代码如下：
<?xml version="1.0" standalone="no"?>
<svg width="200"height="250"version="1.1"xmlns="/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>
注意：stroke、stroke-width 和fill 等属性在后⾯的章节中解释。
矩形
就像你能联想到的，rect元素会在屏幕上绘制⼀个矩形。其实只要6个基本属性就可以控制它在屏幕上的位置和形状。上⾯的图例中最先展⽰了2个矩形，虽然这有点冗余了。右边的那个图形设置了rx和ry属性⽤来控制圆⾓。如果没有设置圆⾓，则默认为0。
<rect x="10"y="10"width="30"height="30"/>
svg图形
<rect x="60"y="10"rx="10"ry="10"width="30"height="30"/>
x
矩形左上⾓的x位置
y
矩形左上⾓的y位置
width
height
矩形的⾼度
rx
圆⾓的x⽅位的半径
ry
圆⾓的y⽅位的半径
圆形
正如你猜到的，circle元素会在屏幕上绘制⼀个圆形。它只有3个属性⽤来设置圆形。
<circle cx="25"cy="75"r="20"/>
r
圆的半径
cx
圆⼼的x位置
cy
圆⼼的y位置
椭圆
是circle元素更通⽤的形式，你可以分别缩放圆的x半径和y半径（通常数学家称之为长轴半径和短轴半径）。<ellipse cx="75"cy="75"rx="20"ry="5"/>
rx
椭圆的x半径
ry
椭圆的y半径
cx
椭圆中⼼的x位置
cy
椭圆中⼼的y位置
线条
绘制直线。它取两个点的位置作为属性，指定这条线的起点和终点位置。
<line x1="10"x2="50"y1="110"y2="150"/>
x1
起点的x位置
y1
起点的y位置
x2
终点的x位置
y2
折线
是⼀组连接在⼀起的直线。因为它可以有很多的点，折线的的所有点位置都放在⼀个points属性中：
<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>
points
点集数列。每个数字⽤空⽩、逗号、终⽌命令符或者换⾏符分隔开。每个点必须包含2个数字，⼀个是x坐标，⼀个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”。
多边形
和折线很像，它们都是由连接⼀组点集的直线构成。不同的是，polygon的路径在最后⼀个点处⾃动回到第⼀个点。需要注意的是，矩形也是⼀种多边形，如果需要更多灵活性的话，你也可以⽤多边形创
建⼀个矩形。
<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>
points
点集数列。每个数字⽤空⽩符、逗号、终⽌命令或者换⾏符分隔开。每个点必须包含2个数字，⼀个是x坐标，⼀个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”。路径绘制完后闭合图形，所以最终的直线将从位置(2,2)连接到位置(0,0)。
路径
path可能是SVG中最常见的形状。你可以⽤path元素绘制矩形（直⾓矩形或者圆⾓矩形）、圆形、椭圆、折线形、多边形，以及⼀些其他的形状，例如贝塞尔曲线、2次曲线等曲线。因为path很强⼤也很复杂，所以会在进⾏详细介绍。这⾥只介绍⼀个定义路径形状的属性。
<path d="M 20 230 Q 40 205, 50 230 T 90230"/>
d
⼀个点集数列以及其它关于如何绘制路径的信息。请阅读章节以了解更多信息。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。