跳到主要内容

SVG 知识速查表

本文档提供 SVG 常用属性、元素和语法的快速参考。

基本结构​

<svg width="200" height="100" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- SVG 内容 -->
</svg>
属性说明
widthSVG 宽度
heightSVG 高度
viewBox坐标系统 "min-x min-y width height"
xmlnsXML 命名空间（必需）
preserveAspectRatio宽高比保持方式

基本形状​

矩形 rect​

<rect x="10" y="10" width="80" height="60" rx="5" ry="5"/>
属性说明默认值
x, y左上角坐标0
width, height宽高必需
rx, ry圆角半径0

圆形 circle​

<circle cx="50" cy="50" r="40"/>
属性说明默认值
cx, cy圆心坐标0
r半径必需

椭圆 ellipse​

<ellipse cx="50" cy="50" rx="40" ry="30"/>
属性说明默认值
cx, cy中心坐标0
rx, ryx/y 轴半径必需

线条 line​

<line x1="10" y1="10" x2="100" y2="100" stroke="#000"/>
属性说明默认值
x1, y1起点坐标0
x2, y2终点坐标0

折线 polyline​

<polyline points="10,10 50,50 100,20" fill="none" stroke="#000"/>
属性说明
points点序列 "x1,y1 x2,y2 ..."

多边形 polygon​

<polygon points="50,10 90,90 10,90"/>
属性说明
points点序列（自动闭合）

路径 path​

<path d="M 10 10 L 100 10 L 100 100 Z"/>

路径命令​

命令参数说明
M/mx y移动到
L/lx y直线到
H/hx水平线
V/vy垂直线
C/cx1 y1, x2 y2, x y三次贝塞尔曲线
S/sx2 y2, x y平滑三次贝塞尔
Q/qx1 y1, x y二次贝塞尔曲线
T/tx y平滑二次贝塞尔
A/arx ry rot large sweep x y弧线
Z/z无闭合路径

大写字母：绝对坐标，小写字母：相对坐标

填充与描边​

填充属性​

属性说明默认值
fill填充颜色black
fill-opacity填充透明度1
fill-rule填充规则nonzero

描边属性​

属性说明默认值
stroke描边颜色none
stroke-width描边宽度1
stroke-opacity描边透明度1
stroke-linecap线端样式butt
stroke-linejoin拐角样式miter
stroke-dasharray虚线模式none
stroke-dashoffset虚线偏移0

stroke-linecap 值​

值效果
butt平直边缘
round圆形端点
square方形端点

stroke-linejoin 值​

值效果
miter尖角
round圆角
bevel斜角

颜色格式​

格式示例
颜色名称red, blue, transparent
十六进制#ff0000, #f00
RGBrgb(255, 0, 0)
RGBArgba(255, 0, 0, 0.5)
HSLhsl(0, 100%, 50%)
currentColor继承当前文本颜色

渐变​

线性渐变​

<defs>
  <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#e74c3c"/>
    <stop offset="100%" stop-color="#3498db"/>
  </linearGradient>
</defs>
<rect fill="url(#grad)"/>

径向渐变​

<defs>
  <radialGradient id="grad" cx="50%" cy="50%" r="50%">
    <stop offset="0%" stop-color="#fff"/>
    <stop offset="100%" stop-color="#3498db"/>
  </radialGradient>
</defs>

文本​

<text x="50" y="50" font-family="Arial" font-size="16" fill="#000">
  文本内容
  <tspan fill="#e74c3c">变色文字</tspan>
</text>
属性说明
x, y文本位置
text-anchor水平对齐：start/middle/end
dominant-baseline垂直对齐
font-family字体
font-size字号
font-weight粗细
font-style样式
letter-spacing字母间距

变换​

<rect transform="translate(10, 20) rotate(45) scale(1.5)"/>
变换参数说明
translatetx [ty]平移
rotateangle [cx cy]旋转
scalesx [sy]缩放
skewXanglex 轴斜切
skewYangley 轴斜切
matrixa b c d e f矩阵变换

动画​

animate​

<circle cx="50" cy="50" r="20">
  <animate attributeName="r" from="20" to="40" dur="1s" repeatCount="indefinite"/>
</circle>

animateTransform​

<rect transform="rotate(0)">
  <animateTransform attributeName="transform" type="rotate" 
                    from="0 50 50" to="360 50 50" dur="2s" repeatCount="indefinite"/>
</rect>

animateMotion​

<circle r="10">
  <animateMotion path="M 0 0 Q 100 -50 200 0" dur="2s" repeatCount="indefinite"/>
</circle>

动画属性​

属性说明
attributeName动画属性名
from/to起始/结束值
values关键帧值列表
dur持续时间
begin开始时间/触发条件
repeatCount重复次数
fill结束状态：freeze/remove

滤镜​

<defs>
  <filter id="blur">
    <feGaussianBlur stdDeviation="3"/>
  </filter>
  <filter id="shadow">
    <feDropShadow dx="3" dy="3" stdDeviation="3"/>
  </filter>
</defs>
<rect filter="url(#blur)"/>

常用滤镜图元​

图元功能
feGaussianBlur高斯模糊
feDropShadow投影
feColorMatrix颜色矩阵
feOffset位移
feMerge合并
feTurbulence噪声
feDisplacementMap位移图

裁剪与遮罩​

裁剪​

<defs>
  <clipPath id="clip">
    <circle cx="50" cy="50" r="40"/>
  </clipPath>
</defs>
<rect width="100" height="100" clip-path="url(#clip)"/>

遮罩​

<defs>
  <mask id="mask">
    <rect width="100" height="100" fill="white"/>
    <circle cx="50" cy="50" r="30" fill="black"/>
  </mask>
</defs>
<rect width="100" height="100" mask="url(#mask)"/>

JavaScript 操作​

获取元素​

const svg = document.getElementById('mySvg');
const circle = svg.querySelector('circle');

创建元素​

const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('x', '10');
svg.appendChild(rect);

修改属性​

circle.setAttribute('fill', '#e74c3c');
circle.style.fill = '#e74c3c';

事件处理​

circle.addEventListener('click', function(e) {
  console.log('clicked');
});

常用单位​

单位说明
无单位像素（默认）
px像素
em相对于字体大小
%百分比
pt点（1pt = 1/72 inch）
cm, mm厘米、毫米

viewBox 计算公式​

scaleX = width / viewBox.width
scaleY = height / viewBox.height

preserveAspectRatio 值​

值效果
none拉伸填满
xMinYMin左上对齐
xMidYMid居中对齐
xMaxYMax右下对齐

完整格式：[align] [meet|slice]

  • meet：保持比例，可能有空白
  • slice：保持比例，可能裁剪

参考资源​