2、基础图形绘制：矩形、圆形、椭圆、线条、折线与多边形的绘制方法

好，咱们正式开始动手画图了。这一章我带你过一遍 SVG 里最基础的几个图形元素。说白了，你以后看到的那些酷炫动画，底层都是由这些「积木块」搭起来的。我个人习惯先把这些基础图形玩熟，后面做复杂效果时才不会手忙脚乱。

2.1 矩形：<rect>

矩形是最常用的图形，没有之一。我在项目中遇到过很多次，UI 设计师给的设计稿里，背景、按钮、卡片，全是矩形。用 <rect> 就能搞定。

它的核心属性就这几个：

• x 和 y：矩形左上角的位置。默认是 (0,0)。
• width 和 height：宽和高。这俩是必填的，不写就看不见。
• rx 和 ry：圆角半径。想让矩形变圆润，就靠它俩。

<!-- 一个普通的矩形 -->
<rect x="10" y="10" width="200" height="100" fill="steelblue" />

<!-- 带圆角的矩形 -->
<rect x="10" y="130" width="200" height="100" rx="15" ry="15" fill="tomato" />

2.2 圆形：<circle>

圆形就简单了。你想想看，它只需要一个圆心和半径。嗯，这里要注意，它没有 x 和 y，而是用 cx 和 cy 表示圆心坐标。

• cx 和 cy：圆心的 x 和 y 坐标。默认是 (0,0)。
• r：半径。必填。

<!-- 一个圆形 -->
<circle cx="100" cy="100" r="80" fill="gold" />

我曾经犯过一个低级错误：把 r 写成了 radius，结果浏览器直接不渲染。SVG 的属性名很严格，少写一个字母都不行。

2.3 椭圆：<ellipse>

椭圆和圆形很像，区别在于它有两个半径：水平半径和垂直半径。为什么需要两个？因为椭圆在 x 轴和 y 轴上的「拉伸程度」不一样。

• cx 和 cy：椭圆的中心。
• rx 和 ry：水平半径和垂直半径。

<!-- 一个扁平的椭圆 -->
<ellipse cx="150" cy="100" rx="120" ry="60" fill="mediumseagreen" />

2.4 线条：<line>

线条就是一条直线。它需要两个点：起点和终点。为什么不用 x 和 y？因为一条线有两个端点，所以用 x1、y1 和 x2、y2 来区分。

• x1、y1：起点坐标。
• x2、y2：终点坐标。

<!-- 一条斜线 -->
<line x1="10" y1="10" x2="200" y2="100" stroke="darkorange" stroke-width="4" />

2.5 折线：<polyline>

折线就是多条线段连在一起。它用一个 points 属性，把所有点的坐标写进去。格式是 x,y x,y x,y，用空格或逗号隔开都行。

• points：一系列点的坐标，至少两个点。

<!-- 一个折线，像山峰一样 -->
<polyline points="10,100 60,20 110,80 160,10 210,100" fill="none" stroke="purple" stroke-width="3" />

我个人习惯用空格分隔坐标，比如 10,100 60,20，这样一眼就能看出每个点的位置。用逗号的话容易看花眼。

2.6 多边形：<polygon>

多边形和折线很像，唯一的区别是：多边形会自动把最后一个点和第一个点连起来，形成一个封闭图形。折线不会。

• points：和折线一样，一系列点的坐标。

<!-- 一个三角形 -->
<polygon points="100,10 190,190 10,190" fill="coral" />

<!-- 一个五边形 -->
<polygon points="100,10 180,40 190,130 120,180 30,140" fill="lightseagreen" />

2.7 总结对比

为了方便你快速查阅，我把这几个图形的核心属性整理成了表格：

图形	标签	核心属性	是否封闭
矩形	<rect>	x, y, width, height, rx, ry	是
圆形	<circle>	cx, cy, r	是
椭圆	<ellipse>	cx, cy, rx, ry	是
线条	<line>	x1, y1, x2, y2	否
折线	<polyline>	points	否
多边形	<polygon>	points	是

嗯，这一章的内容就这些。你把这些图形都手敲一遍，感受一下每个属性的作用。下一章我们会聊路径（<path>），那才是 SVG 里最强大、也最灵活的东西。准备好了吗？