SVG 基本语法最精华速查表（2025 版）
直接看这一篇就够你日常写 99% 的 SVG 了，全部代码可直接复制运行。
1. 最基础的 SVG 骨架（必须记住这 4 行）
<svg width="400" height="200" viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
<!-- 这里面放所有图形 -->
</svg>width/height：最终显示尺寸（可被 CSS 覆盖）viewBox="0 0 宽 高"：坐标系统（最重要！决定了内部坐标）xmlns：必须写，否则浏览器不认
2. 6 大基本形状（背会这 6 个就够用了）
| 形状 | 语法 | 关键属性 | 示例 |
|---|---|---|---|
| 矩形 | <rect> | x, y, width, height, rx/ry（圆角） | <rect x="10" y="10" width="100" height="60" rx="10"/> |
| 圆形 | <circle> | cx, cy, r | <circle cx="100" cy="80" r="40"/> |
| 椭圆 | <ellipse> | cx, cy, rx, ry | <ellipse cx="200" cy="80" rx="80" ry="40"/> |
| 直线 | <line> | x1,y1,x2,y2 | <line x1="0" y1="0" x2="200" y2="100"/> |
| 折线 | <polyline> | points=”x1 y1 x2 y2 …” | <polyline points="0,0 50,50 100,0"/> |
| 多边形 | <polygon> | points（自动闭合） | <polygon points="100,10 150,90 50,90"/> |
3. 万能的 （所有复杂图形都靠它）
<path d="路径指令" />常见指令（大写=绝对坐标，小写=相对坐标）：
| 指令 | 含义 | 示例 |
|---|---|---|
| M x y | 移到（起点） | M 10 10 |
| L x y | 直线到 | L 100 100 |
| H x | 水平线到 | H 200 |
| V y | 垂直线到 | V 50 |
| Q x1 y1 x y | 二次贝塞尔曲线 | Q 100 200 200 100 |
| C x1 y1 x2 y2 x y | 三次贝塞尔曲线 | C 100 200 300 0 400 100 |
| Z | 闭合路径 | Z |
经典例子：
<!-- 心形 ❤️ -->
<path d="M 100,30
C 140,0 200,0 200,60
C 200,100 150,150 100,190
C 50,150 0,100 0,60
C 0,0 60,0 100,30 Z"
fill="red"/>4. 公共样式属性（写一次，后面都省）
fill="red" <!-- 填充颜色 -->
fill="none" <!-- 无填充 -->
fill-opacity="0.5" <!-- 填充透明度 -->
stroke="#000" <!-- 边框颜色 -->
stroke-width="4" <!-- 边框粗细 -->
stroke-linecap="round" <!-- 端点：butt | round | square -->
stroke-dasharray="10 5" <!-- 虚线：10像素实线 + 5像素空白 -->
opacity="0.8" <!-- 整体透明度 -->5. 文字（超实用）
<text x="100" y="50" font-size="32" text-anchor="middle">Hello SVG</text>
<!-- 沿着路径排字（环形文字）-->
<defs>
<path id="circle" d="M100,100 m-75,0 a75,75 0 1,1 150,0 a75,75 0 1,1 -150,0"/>
</defs>
<text>
<textPath href="#circle">● 环形文字真好看 ● 环形文字真好看</textPath>
</text>6. 30 秒记住的完整小示例（复制即用）
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" style="background:#f0f0f0">
<rect x="10" y="10" width="180" height="180" rx="20" fill="#4a6fe3"/>
<circle cx="100" cy="80" r="35" fill="white"/>
<circle cx="100" cy="80" r="20" fill="#4a6fe3"/>
<path d="M70 110 Q100 140 130 110" stroke="white" stroke-width="10" fill="none" stroke-linecap="round"/>
</svg>结果：一个蓝色笑脸卡片
把上面内容保存为 test.svg 双击打开，或者直接粘到 HTML 里就能看到效果。
需要我再给你发一份「SVG 基本语法一页纸 PDF（彩色打印版）」或者「100 个最常用路径代码片段」吗？一发就学会！
