SVG 有哪些基本形状元素，它们各自的属性和用法是什么

为什么需要了解 SVG 基本形状

用 CSS 画一个圆角矩形要写一堆 border-radius，用 Canvas 画一个多边形要手动管理路径状态。SVG 不同——它为常见图形提供了专门的元素，写法直观，浏览器直接渲染，还能无损缩放。理解这六个基本形状和 path 元素，是用好 SVG 的前提。

六种基本形状

rect：矩形

<rect> 画矩形，是最常用的形状元素之一。

核心属性：

• x / y：矩形左上角的坐标，默认 0
• width / height：宽和高
• rx / ry：圆角半径

svg
<rect x="10" y="10" width="200" height="100" rx="8" ry="8" fill="#4A90D9" stroke="#2C5F8A" stroke-width="2"/>

关于 rx 和 ry 有几个要点：只设 rx 时，ry 默认等于 rx，四个角均匀圆角；同时设置 rx 和 ry 可以分别控制水平和垂直方向的圆角弧度，形成椭圆角；如果 rx + rx > width，浏览器会自动按比例缩小半径，不会出错。当 rx 等于 width/2、ry 等于 height/2 时，矩形退化为椭圆。

circle：圆形

<circle> 画圆，只需要圆心和半径。

核心属性：

• cx / cy：圆心坐标，默认 0
• r：半径

svg
<circle cx="100" cy="100" r="50" fill="#E74C3C" stroke="#C0392B" stroke-width="2"/>

圆形没有宽高概念，尺寸完全由 r 决定。注意 cx/cy 默认是 0，如果不设置，圆心会落在 SVG 画布左上角，大部分圆会显示不全。

ellipse：椭圆

<ellipse> 是 circle 的扩展版，x 和 y 方向的半径可以不同。

核心属性：

• cx / cy：圆心坐标
• rx：x 轴半径
• ry：y 轴半径

svg
<ellipse cx="150" cy="80" rx="120" ry="50" fill="#2ECC71" stroke="#27AE60" stroke-width="2"/>

当 rx === ry 时，椭圆就是圆。椭圆常用于按钮背景、进度条轨道等需要水平拉伸的场景。

line：直线

<line> 画一条线段，从 (x1,y1) 到 (x2,y2)。

核心属性：

• x1 / y1：起点坐标
• x2 / y2：终点坐标

svg
<line x1="0" y1="0" x2="200" y2="150" stroke="#8E44AD" stroke-width="3"/>

直线没有填充，只有描边。如果忘记写 stroke，线段不可见——这是初学者最常踩的坑。

polyline：折线

<polyline> 画一系列连续线段，不自动闭合。

核心属性：

• points：点序列，格式为 "x1,y1 x2,y2 x3,y3 ..."

svg
<polyline points="10,80 40,20 70,60 100,10 130,50 160,30" fill="none" stroke="#F39C12" stroke-width="2"/>

折线默认有填充，如果不想要填充效果需要显式写 fill="none"，否则浏览器会按"首尾连线形成封闭区域"来填充颜色，出来的效果通常不是你想要的。

polygon：多边形

<polygon> 和 polyline 几乎一样，区别在于最后一个点会自动连回第一个点，形成闭合图形。

核心属性：

• points：点序列

svg
<polygon points="100,10 190,80 160,170 40,170 10,80" fill="#1ABC9C" stroke="#16A085" stroke-width="2"/>

三角形、五角星、六边形等封闭图形用 polygon 比 polyline 方便，不用手动把起点写在末尾。

path：终极形状元素

path 是 SVG 中功能最强的元素，上面六种基本形状都能用 path 画出来，还能画贝塞尔曲线、弧线等基本形状画不了的图形。

path 的核心是 d 属性（data 的缩写），里面是一串命令序列，每条命令由字母加参数组成。

d 属性的命令体系

大小写有区别：大写字母用绝对坐标，小写字母用相对坐标（相对于上一个命令的终点）。

移动与直线

命令	含义	参数
M	移动画笔到指定位置	x,y
L	画直线到指定位置	x,y
H	画水平线	x
V	画垂直线	y
Z	闭合路径，回到起点	无

用 M + L + Z 就能画多边形：

svg
<path d="M 100,10 L 190,80 L 160,170 L 40,170 L 10,80 Z" fill="#1ABC9C"/>

这和上面 polygon 的 points 五边形效果完全相同。

曲线

命令	含义	参数
Q	二次贝塞尔曲线	控制点x,y 终点x,y
T	平滑二次贝塞尔（自动镜像上一个控制点）	终点x,y
C	三次贝塞尔曲线	控制点1x,y 控制点2x,y 终点x,y
S	平滑三次贝塞尔（自动镜像上一个控制点2）	控制点2x,y 终点x,y

三次贝塞尔示例：

svg
<path d="M 10,80 C 40,10 160,10 190,80" fill="none" stroke="#E74C3C" stroke-width="3"/>

两个控制点（40,10）和（160,10）把曲线往上方拉，形成一条向上拱起的弧线。S 命令省略第一个控制点，浏览器自动取上一个 C/S 的第二控制点关于当前点的镜像，用来画连续光滑曲线很方便。

弧线

命令	含义	参数
A	椭圆弧线	rx ry x-rotation large-arc-flag sweep-flag x,y

A 命令参数最多，拆解一下：

• rx, ry：椭圆的 x 和 y 半径
• x-rotation：椭圆的旋转角度
• large-arc-flag：0 选小弧，1 选大弧
• sweep-flag：0 逆时针，1 顺时针
• x,y：终点坐标

svg
<path d="M 10,80 A 90,50 0 0,1 190,80" fill="none" stroke="#9B59B6" stroke-width="3"/>

A 命令画圆弧时设 rx === ry 即可。它和 circle 的区别在于：A 画的是两点之间的弧段，不是完整圆。

通用样式属性

所有形状都共享这些样式属性：

• fill：填充颜色，默认黑色。设 none 不填充，设 url(#gradientId) 用渐变填充
• stroke：描边颜色，默认 none（不可见）
• stroke-width：描边宽度，默认 1
• stroke-linecap：线段端点样式，butt（默认）/ round / square
• stroke-linejoin：折点连接样式，miter（默认）/ round / bevel
• stroke-dasharray：虚线模式，如 "5,3" 表示 5px 实线 3px 间隔
• opacity / fill-opacity / stroke-opacity：整体或分项透明度

形状组合与变换

g 元素分组

<g> 把多个形状打包成一组，可以统一设置样式和变换：

svg
<g fill="#3498DB" stroke="#2980B9" stroke-width="2">
  <rect x="10" y="10" width="60" height="40"/>
  <circle cx="100" cy="30" r="20"/>
</g>

transform 变换

所有形状都支持 transform 属性，常用值：

• translate(dx, dy)：平移
• rotate(angle, cx, cy)：旋转，角度单位为度
• scale(sx, sy)：缩放
• skewX(angle) / skewY(angle)：倾斜

svg
<rect x="0" y="0" width="40" height="40" transform="translate(50,50) rotate(45)" fill="#E67E22"/>

变换的书写顺序影响结果——translate 在 rotate 前面意味着先平移再旋转，效果和反过来不同。

从基本形状到 path 的转换

在实际开发中，把基本形状转成 path 有几个常见场景：需要对形状做路径动画（如 stroke-dashoffset 描边动画）、需要做形状变形（morphing，两个 path 之间插值）、需要导出给只支持 path 的工具（如某些 CNC 切割机）。

转换规则：

• rect 转 path：四个角用 L 或 A（有圆角时）连接。无圆角的矩形 M x,y H x+w V y+h H x Z；有圆角的需要在四个角用 A 命令画弧
• circle 转 path：用两个 A 命令拼成完整圆。M cx+r,cy A r,r 0 1,1 cx-r,cy A r,r 0 1,1 cx+r,cy Z
• ellipse 转 path：同 circle，把 r 换成 rx/ry
• line 转 path：M x1,y1 L x2,y2
• polyline 转 path：M 到第一个点，然后 L 到后续每个点
• polygon 转 path：同 polyline，末尾加 Z

前端可以用 Jarek Foksa 的 path-data polyfill 或在线工具（如 SVG Shape to Path Converter）完成批量转换。

怎么选择合适的形状元素

简单规则：能用基本形状就用基本形状，语义更清晰、代码更短。需要曲线或复杂图形时才用 path。圆角矩形用 rect 的 rx/ry 比用 path 手拼 A 命令简单得多。需要做路径动画或变形时，再考虑把基本形状转成 path。