SVG 参考手册

本手册提供 SVG 元素和属性的快速参考。

基本形状元素

元素	描述	关键属性
<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>	路径	d

文本元素

元素	描述	关键属性
<text>	文本	x, y, dx, dy, text-anchor
<tspan>	文本片段	x, y, dx, dy
<textPath>	路径文本	href, startOffset

容器元素

元素	描述	用途
<svg>	SVG 根元素	定义 SVG 画布
<g>	组	组合多个元素
<defs>	定义	定义可复用元素
<symbol>	符号	定义可复用图形
<use>	使用	引用已定义元素

渐变元素

元素	描述	关键属性
<linearGradient>	线性渐变	x1, y1, x2, y2, gradientUnits
<radialGradient>	径向渐变	cx, cy, r, fx, fy
<stop>	渐变色标	offset, stop-color, stop-opacity

滤镜元素

元素	描述
<filter>	滤镜容器
<feGaussianBlur>	高斯模糊
<feDropShadow>	阴影
<feOffset>	偏移
<feBlend>	混合
<feColorMatrix>	颜色矩阵
<feMerge>	合并
<feFlood>	填充
<feComposite>	组合

路径命令

直线命令

命令	名称	参数	示例
M	moveto	x,y	M10,20
L	lineto	x,y	L50,60
H	水平线	x	H100
V	垂直线	y	V80
Z	闭合	无	Z

曲线命令

命令	名称	参数	描述
C	三次贝塞尔	x1,y1 x2,y2 x,y	两个控制点
S	平滑三次贝塞尔	x2,y2 x,y	一个控制点
Q	二次贝塞尔	x1,y1 x,y	一个控制点
T	平滑二次贝塞尔	x,y	无控制点
A	弧线	rx,ry rot large sweep x,y	椭圆弧

通用属性

填充和描边

属性	描述	值示例
fill	填充颜色	#3b82f6, rgb(59,130,246), none
fill-opacity	填充透明度	0.5
fill-rule	填充规则	nonzero, evenodd
stroke	描边颜色	#3b82f6, none
stroke-width	描边宽度	2, 2px
stroke-opacity	描边透明度	0.8
stroke-linecap	端点样式	butt, round, square
stroke-linejoin	连接样式	miter, round, bevel
stroke-dasharray	虚线模式	5,3, 10,5,2,5
stroke-dashoffset	虚线偏移	10

透明度和可见性

属性	描述	值示例
opacity	整体透明度	0.5
visibility	可见性	visible, hidden
display	显示	inline, none

变换

属性	描述	值示例
transform	变换	translate(10,20), rotate(45), scale(1.5)
transform-origin	变换原点	center, 50% 50%

变换函数

函数	描述	示例
translate(x,y)	平移	translate(100,50)
rotate(angle)	旋转	rotate(45)
rotate(angle,cx,cy)	围绕点旋转	rotate(45,100,100)
scale(x,y)	缩放	scale(1.5), scale(2,1)
skewX(angle)	X 倾斜	skewX(30)
skewY(angle)	Y 倾斜	skewY(30)
matrix(a,b,c,d,e,f)	矩阵变换	matrix(1,0,0,1,0,0)

文本属性

属性	描述	值示例
font-family	字体	Arial, sans-serif
font-size	字号	16, 16px, 1.2em
font-weight	字重	normal, bold, 700
font-style	字体样式	normal, italic
text-anchor	文本对齐	start, middle, end
text-decoration	文本装饰	underline, line-through
letter-spacing	字母间距	2px
word-spacing	单词间距	5px

颜色格式

<!-- 命名颜色 -->
fill="red"
fill="steelblue"

<!-- 十六进制 -->
fill="#ff0000"
fill="#f00"

<!-- RGB -->
fill="rgb(255, 0, 0)"
fill="rgb(100%, 0%, 0%)"

<!-- RGBA -->
fill="rgba(255, 0, 0, 0.5)"

<!-- HSL -->
fill="hsl(0, 100%, 50%)"

<!-- HSLA -->
fill="hsla(0, 100%, 50%, 0.5)"

viewBox 和 preserveAspectRatio

viewBox

<svg viewBox="min-x min-y width height">
<!-- 示例 -->
<svg viewBox="0 0 100 100">

preserveAspectRatio

<svg preserveAspectRatio="align meetOrSlice">

<!-- 对齐值 -->
xMinYMin | xMidYMin | xMaxYMin
xMinYMid | xMidYMid | xMaxYMid
xMinYMax | xMidYMax | xMaxYMax
none

<!-- 示例 -->
<svg preserveAspectRatio="xMidYMid meet">
<svg preserveAspectRatio="xMinYMin slice">
<svg preserveAspectRatio="none">

常用滤镜示例

阴影

<filter id="shadow">
  <feDropShadow dx="3" dy="3" stdDeviation="3" flood-color="#00000040"/>
</filter>

模糊

<filter id="blur">
  <feGaussianBlur stdDeviation="5"/>
</filter>

灰度

<filter id="grayscale">
  <feColorMatrix type="saturate" values="0"/>
</filter>

发光

<filter id="glow">
  <feGaussianBlur stdDeviation="4" result="blur"/>
  <feMerge>
    <feMergeNode in="blur"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>

动画属性

animate

<animate 
  attributeName="属性名"
  from="起始值"
  to="结束值"
  values="值1;值2;值3"
  dur="持续时间"
  begin="开始时间"
  repeatCount="重复次数|indefinite"
  fill="freeze|remove"
/>

animateTransform

<animateTransform
  attributeName="transform"
  type="translate|rotate|scale|skewX|skewY"
  from="起始值"
  to="结束值"
  dur="持续时间"
  repeatCount="indefinite"
/>

浏览器支持

功能	Chrome	Firefox	Safari	Edge
基本形状	✓	✓	✓	✓
渐变	✓	✓	✓	✓
滤镜	✓	✓	✓	✓
动画 (SMIL)	✓	✓	✓	✓
CSS 动画	✓	✓	✓	✓

相关资源

• MDN SVG 文档
• W3C SVG 规范
• SVG 图标库 - Heroicons
• SVG 图标库 - Feather Icons
• SVG 编辑器 - SVG Edit
• SVG 优化工具 - SVGO