svg基本图形绘制介绍

一、什么是 SVG

SVG（Scalable Vector Graphics）是一种可缩放矢量图形格式，与位图（如 PNG、JPG）不同，SVG 是用 XML 代码描述图形的，因此可以无限放大而不失真。

SVG 的优势

特性	说明
无限缩放	放大任意倍数都不会模糊
体积小	代码描述通常比位图文件小
可编辑	可以用文本编辑器直接修改
可动画	支持 CSS 和 SMIL 动画
可交互	支持 JavaScript 交互

---

二、SVG 基础语法

2.1 SVG 画布

<svg width="200" height="200" style="background: lightgray">
  <!-- 图形元素放在这里 -->
</svg>

注意事项：

• width 和 height 定义画布大小
• SVG 的坐标原点 (0, 0) 在左上角
• x 轴向右为正，y 轴向下为正

2.2 基本图形元素

SVG 提供了多种预定义的图形元素：

元素	用途	示例
<rect>	矩形	<rect x="10" y="10" width="100" height="50" />
<circle>	圆形	<circle cx="100" cy="100" r="50" />
<ellipse>	椭圆	<ellipse cx="100" cy="100" rx="80" ry="50" />
<line>	线条	<line x1="10" y1="10" x2="100" y2="100" />
<path>	路径	<path d="M10 10 L100 100" />

2.3 常用属性

<rect 
  x="10"       <!-- 左上角 x 坐标 -->
  y="10"       <!-- 左上角 y 坐标 -->
  width="100"  <!-- 宽度 -->
  height="50"  <!-- 高度 -->
  fill="blue"  <!-- 填充颜色 -->
  stroke="red" <!-- 边框颜色 -->
  stroke-width="2" <!-- 边框宽度 -->
  opacity="0.8" <!-- 透明度 0-1 -->
/>

---

三、核心图形详解

3.1 矩形（rect）

绘制矩形使用 <rect> 标签。

涉及属性：

属性	作用	值
x	左上角距离画布左边缘的距离	数值
y	左上角距离画布上边缘的距离	数值
width	矩形宽度	数值
height	矩形高度	数值
fill	填充颜色	颜色名、十六进制、rgb() 等
rx	水平方向的圆角半径	数值
ry	垂直方向的圆角半径	数值

示例：

<svg width="200" height="200" style="background: lightgray">
  <rect x="20" y="20" width="80" height="60" fill="blue" />
  <rect x="120" y="20" width="60" height="60" rx="10" fill="green" />
</svg>

3.2 圆形（circle）

绘制圆形使用 <circle> 标签。

涉及属性：

属性	作用	默认值
cx	圆心的 x 坐标	0
cy	圆心的 y 坐标	0
r	圆的半径	必填
fill	填充颜色	黑色

注意： 如果不设置 cx 和 cy，圆心默认在 (0, 0)，即画布左上角。

示例：

<svg width="200" height="200" style="background: lightgray">
  <circle cx="100" cy="100" r="80" fill="red" />
  <circle cx="100" cy="100" r="50" fill="none" stroke="black" stroke-width="3" />
</svg>

3.3 线条（line）

绘制线条使用 <line> 标签。

涉及属性：

属性	作用	备注
x1	起点 x 坐标	必填
y1	起点 y 坐标	必填
x2	终点 x 坐标	必填
y2	终点 y 坐标	必填
stroke	线条颜色	必须设置，否则线条不可见
stroke-width	线条宽度	默认 1

重要提醒： stroke 属性必须设置，否则线条不可见！

示例：

<svg width="400" height="200" style="background: lightgray">
  <line x1="50" y1="100" x2="350" y2="100" stroke="blue" stroke-width="3" />
</svg>

3.4 路径（path）------ 最强大的元素

路径是 SVG 中最强大的元素，可以绘制任意形状。核心是 d 属性中的命令序列。

常用路径命令：

命令	说明	示例
M x,y	移动到（Move to）	M 10,10 将画笔移到 (10,10)
L x,y	画直线到（Line to）	L 100,100 画到 (100,100)
H x	水平线（Horizontal）	H 200 画到 x=200
V y	垂直线（Vertical）	V 150 画到 y=150
Z	闭合路径（Close）	自动首尾相连

坐标类型：

• 大写字母：绝对坐标（相对于画布原点）
• 小写字母：相对坐标（相对于当前位置）

示例：

<svg width="300" height="200" style="background: lightgray">
  <path d="M 50,100 L 150,50 L 250,100 L 150,150 Z" fill="yellow" stroke="black" stroke-width="2" />
</svg>

---

四、样式与美化

4.1 描边样式

涉及属性：

属性	作用	值
stroke	描边颜色	颜色名、十六进制等
stroke-width	描边宽度	数值（无单位默认 px）
stroke-linecap	线帽样式	butt、round、square
stroke-linejoin	拐角样式	miter、round、bevel

stroke-linecap 三种值：

值	效果	说明
butt	无线帽	默认，平切
round	圆形线帽	两端半圆
square	方形线帽	两端延伸半个宽度

stroke-linejoin 三种值：

值	效果	说明
miter	尖角	默认，尖锐
round	圆角	圆滑
bevel	斜角	平切

示例：

<svg width="400" height="150" style="background: lightgray">
  <line x1="20" y1="50" x2="120" y2="50" stroke="black" stroke-width="10" stroke-linecap="butt" />
  <line x1="150" y1="50" x2="250" y2="50" stroke="black" stroke-width="10" stroke-linecap="round" />
  <line x1="280" y1="50" x2="380" y2="50" stroke="black" stroke-width="10" stroke-linecap="square" />
</svg>

4.2 虚线效果

涉及属性：

属性	作用	值
stroke-dasharray	虚线图案	线段和间隙的长度序列
stroke-dashoffset	虚线偏移	数值，向前移动

stroke-dasharray 用法：

• stroke-dasharray="10 5" → 10px 线段，5px 间隙
• stroke-dasharray="15 5 5 5" → 15px 线，5px 间隙，5px 线，5px 间隙...

示例：

<svg width="300" height="100" style="background: lightgray">
  <line x1="20" y1="50" x2="280" y2="50" stroke="black" stroke-width="2" stroke-dasharray="10 5" />
  <line x1="20" y1="80" x2="280" y2="80" stroke="red" stroke-width="2" stroke-dasharray="15 5 5 5" />
</svg>

4.3 渐变效果

渐变需要定义在 <defs> 标签内，然后通过 url(#id) 引用。

线性渐变

涉及属性：

属性	作用
id	渐变唯一标识
x1、y1	渐变起点坐标
x2、y2	渐变终点坐标
<stop>	渐变颜色节点
offset	颜色位置（0%-100%）
stop-color	节点颜色

示例：

<svg width="300" height="200" style="background: lightgray">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </linearGradient>
  </defs>
  <rect x="50" y="50" width="200" height="100" fill="url(#grad1)" />
</svg>

径向渐变

涉及属性：

属性	作用	默认值
cx、cy	渐变中心坐标	50%
r	渐变半径	50%
fx、fy	渐变焦点坐标	与中心重合

示例：

<svg width="300" height="200" style="background: lightgray">
  <defs>
    <radialGradient id="grad2" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="white" />
      <stop offset="100%" stop-color="green" />
    </radialGradient>
  </defs>
  <circle cx="150" cy="100" r="60" fill="url(#grad2)" />
</svg>

---