在日常工作中，有些图形的使用频率非常高，因此 SVG 提供了一系列预设图形，便于用户快速调用。对于不从事艺术创作类工作的人来说，这些预设图形能够满足绝大多数需求，如果不满足，SVG 也提供了更自由、更强大的路径元素。这篇文章就来讲一讲 SVG 中的基础图形。

基础图形

文中所有内容都假设没有修改坐标系。

矩形

矩形用 <rect> 表示，它有六个属性：

• x：指定矩形左边缘的位置
• y：指定矩形上边缘的位置
• width：指定矩形的宽度
• height：指定矩形的高度
• rx：指定矩形在宽度方向上的圆角半径
• ry：指定矩形在高度方向上的圆角半径

示例：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.2" style="border: solid 1px #00b38a">
    <rect x="50" y="50" width="100" height="100" fill="#00b38a"/>
</svg>

得到一个普通矩形：

如果需要一个圆角矩形，可以设置 rx 和 ry 属性：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.2" style="border: solid 1px #00b38a">
    <rect x="50" y="50" width="100" height="100" rx="10" ry="10" fill="#00b38a"/>
</svg>

得到的结果如下：

矩形的圆角是用 elliptical arc 命令绘制的，不一定是正圆。上面的示例中，矩形的宽度和高度是相等的（即为正方形），rx 和 ry 的值也相等，因此得到的圆角是一个正圆。

当只设置 rx 和 ry 其中一个时，SVG 会根据设定的 rx（或 ry）值占 width（或 height）的比例自动计算另一个值，在矩形宽度与高度不等的情况下，圆角就会是一个椭圆。

例如：

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg" version="1.2" style="border: solid 1px #00b38a">
    <rect x="50" y="50" width="300" height="100" rx="100" fill="#00b38a"/>
    <line x1="0" y1="100" x2="400" y2="100" stroke="red" stroke-width="3" stroke-dasharray="1,3"/>
    <line x1="280" y1="0" x2="280" y2="200" stroke="red" stroke-width="3" stroke-dasharray="1,3"/>
</svg>

得到的结果如下：

如果同时指定了 rx 和 ry，则使用各自占 width 和 height 的比例进行绘制，但不管如何设定，rx 的最大值都为 width 的一半，ry 的最大值都为 height 的一半。

圆

圆用 <circle> 表示，它有三个属性：

• cx：指定圆心的横坐标
• cy：指定圆心的纵坐标
• r：指定圆的半径

示例：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.2" style="border: solid 1px #00b38a">
    <circle cx="100" cy="100" r="50" fill="#00b38a"/>
</svg>

得到的结果如下：

椭圆

椭圆用 <ellipse> 表示，它有四个属性：

• cx：指定椭圆中心的横坐标
• cy：指定椭圆中心的纵坐标
• rx：指定椭圆与当前坐标系 X 轴平行的轴的半径
• ry：指定椭圆与当前坐标系 Y 轴平行的轴的半径

需要特别注意的是，rx（或 ry）不是固定针对长轴（或短轴）的，而且会随着坐标系的改变而改变。

示例：

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" version="1.2" style="border: solid 1px #00b38a">
    <ellipse cx="150" cy="100" rx="100" ry="50" fill="#00b38a"/>
</svg>

得到的结果如下：

直线

直线用 <line> 表示，它有四个属性：

• x1：起始点的横坐标
• y1：起始点的纵坐标
• x2：结束点的横坐标
• y2：结束点的纵坐标

示例：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.2" style="border: solid 1px #00b38a">
    <line x1="50" y1="100" x2="150" y2="100" stroke-width="1" stroke="#00b38a"/>
</svg>

得到的结果如下：

折线

折线用 <polyline> 表示，它有一个属性：

• points：两个或多个点坐标

第一个点坐标为折线的起始点坐标，且每个点坐标都是绝对坐标。

示例：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.2" style="border: solid 1px #00b38a">
    <polyline points="0,0 50,50 100,50 100,150 150,150 200,200" fill="none" stroke="#00b38a"/>
</svg>

得到的结果如下：

多边形

多边形用 <polygon> 表示，它有一个属性：

• points：三个或多个点坐标

多边形是闭合图形，无论指定多少个点坐标，最终都会自动调用 closepath 命令进行闭合，其中的每个点坐标都是绝对坐标。

示例：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.2" style="border: solid 1px #00b38a">
    <polygon fill="none" stroke="#00b38a" stroke-width="1" points="100,20 20,180 180,180" />
</svg>

得到的结果如下：

多边形会从最后一个点自动向起始点绘制一条直线以闭合，因此无需指定结束点坐标（即重复起始点坐标）。

结语

基础图形虽然没有路径元素那么强大，但也没有路径元素那么复杂，在个性化需求不高的情况下，基础图形是非常不错的选择。