基本 SVG 形状

SVG 定义了六种基本形状，这些基本形状和路径（在路径是什么？中讨论）一道，可以组合起来形成任何可能的图像。每个基本形状都带有指定其位置和大小的属性。它们的颜色和轮廓分别由 fill 和 stroke 属性确定。这些形状是：

圆（circle）：显示一个圆心在指定点、半径为指定长度的标准的圆。

椭圆（ellipse）：显示中心在指定点、长轴和短轴半径为指定长度的椭圆。

矩形（rect）：显示左上角在指定点并且高度和宽度为指定值的矩形（包括正方形）。也可以通过指定边角圆的 x 和 y 半径画成圆角矩形。

线（line）：显示两个坐标之间的连线。

折线（polyline）：显示顶点在指定点的一组线。

多边形（polygon）：类似于 polyline，但增加了从最末点到第一点的连线，从而创建了一个闭合形状。

下面的示例演示了这些形状：

<?xml version="1.0"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">

<desc>Basic shapes</desc>

<g>

<circle cx="50" cy="50" r="25" />

<ellipse cx="75" cy="125" rx="50" ry="25" />

<rect x="155" y="5" width="75" height="100"/>

<rect x="250" y="5" width="75" height="100" rx="30" ry="20" />

<line x1="0" y1="150" x2="400" y2="150"

stroke-width="2" stroke="blue"/>

<polyline points="50,175 150,175 150,125 250,200" />

<polygon points="350,75 379,175 355,175 355,200 345,200

345,175 321,175" />

<rect x="0" y="0" width="400" height="200"

fill="none" stroke="red" stroke-width="3" />

</g>

</svg>