全面介绍SVG基本形状的绑制方法，包括矩形、圆形、椭圆、直线、折线、多边形和路径。通过实际案例掌握各种SVG图形元素的用法，适合前端开发者学习SVG图形绑制。 SVG 提供了丰富的图形元素，可以绑制各种基本形状。掌握这些基本形状是学习 SVG 的第一步。
SVG 有 7 种基本形状元素：
| 元素 | 用途 | 特点 |
|---|---|---|
<rect> | 矩形 | 可设置圆角 |
<circle> | 圆形 | 基于圆心和半径 |
<ellipse> | 椭圆 | 可设置不同的水平和垂直半径 |
<line> | 直线 | 两点之间的线段 |
<polyline> | 折线 | 多个点连接的开放路径 |
<polygon> | 多边形 | 多个点连接的闭合路径 |
<path> | 路径 | 最强大的形状元素 |
所有形状元素都支持这些通用属性：
fill：填充颜色stroke：描边颜色stroke-width：描边宽度opacity：整体透明度id：唯一标识符class：CSS 类名style：内联样式<rect id="myRect" class="box" style="fill: #3498db;"
x="10" y="10" width="100" height="50"/>
不同场景选择不同的形状：
| 场景 | 推荐形状 | 原因 |
|---|---|---|
| 按钮背景 | rect | 可以设置圆角 |
| 图标圆点 | circle | 简单易用 |
| 进度指示 | ellipse | 可以做椭圆形 |
| 分隔线 | line | 简单直接 |
| 折线图 | polyline | 连接数据点 |
| 三角形 | polygon | 自动闭合 |
| 复杂图形 | path | 灵活强大 |
多个形状可以用 <g> 元素分组：
<g fill="#3498db" stroke="#2980b9" stroke-width="2">
<rect x="20" y="20" width="40" height="40" rx="5"/>
<circle cx="100" cy="40" r="20"/>
<rect x="140" y="20" width="40" height="40" rx="5"/>
</g>
分组的好处：
接下来我们会详细学习每种形状：
形状的位置由坐标决定，要注意坐标原点在左上角：
(0,0) ────────► x
│
│
│
▼
y
SVG 支持多种单位，但通常使用无单位数值：
<rect x="10" y="10" width="100" height="50"/>
<rect x="10px" y="10px" width="100px" height="50px"/>
某些属性支持负值：
<rect x="-10" y="-10" width="120" height="70"/>
这会让矩形部分超出视口。
Q: 形状不显示怎么办？
A: 检查以下几点：
Q: 如何居中形状？
A: 计算视口中心，然后调整形状坐标：
中心 x = viewBox 宽度 / 2
中心 y = viewBox 高度 / 2
Q: 形状重叠如何控制？
A: 后绘制的形状会覆盖先绘制的。可以使用 z-index（CSS）或调整元素顺序。
基本形状是 SVG 的基础，掌握它们可以绑制大部分常见图形。每种形状都有其特点和适用场景，选择合适的形状可以让代码更简洁、性能更好。