SVG - 基础图形

SVG (Scalable Vector Graphics) 可伸缩矢量图形是一种不随放大缩小而失真的矢量图形格式

本文介绍了SVG的一些基础语法

在html中使用svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"></svg>

xmlns属性：SVG命名空间

视口(Viewport)和视图框(ViewBox)

视口(Viewport)

属性width和height，表示SVG图像的宽高

视图框(ViewBox)

属性viewBox，SVG空间的视口空间

例如：viewBox="0 0 100 200"表示从SVG图像显示坐标系(0, 0)开始宽度100单位，高度200单位的矩形空间

注意

viewBox中的后两位数并不表示坐标，而是代表长宽

常用形状元素

<rect> 矩形

属性	描述
x, y	左上角坐标
width, height	矩形宽高
rx, ry	圆角半径

矩形

<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
  <rect x="10" y="10" width="50" height="50" style="stroke:#000; fill:#42b883;" />
</svg>

圆角矩形

<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
  <rect x="10" y="10" width="50" height="50" rx="10" ry="10" style="stroke:#000; fill:#42b883;" />
</svg>

<circle> 圆形

属性	描述
cx, cy	圆心坐标
r	半径

圆形

<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
  <circle cx="30" cy="30" r="20" style="stroke:#000; fill:#42b883;" />
</svg>

<ellipse> 椭圆

属性	描述
cx, cy	圆心坐标
rx, ry	横纵半径

椭圆

<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
  <ellipse cx="30" cy="30" rx="20" ry="10" style="stroke:#000; fill:#42b883;" />
</svg>

<line> 直线

属性	描述
x1, y1	起点坐标
x2, y2	终点坐标

直线

<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
  <line x1="0" y1="100" x2="100" y2="0" style="stroke:#000;" />
</svg>

<polyline> 折线

属性	描述
points	折线坐标（以空格分隔每个坐标，以,分隔x与y）

折线（未闭合）

<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
  <polyline points="0,10 50,100 100,10" style="stroke:#000; fill:#42b883;" />
</svg>

<polygon> 多边形

属性	描述
points	折线坐标

提示

规范上：以 空格 分隔每个坐标，以,分隔x与y。
但实际上： 空格 与 , 并无区别。

折线（闭合）

<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
  <polygon points="0,10 50,100 100,10" style="stroke:#000; fill:#42b883;" />
</svg>

提示

<polyline>(折线) 与 <polygon>(多边形) 的区别：
<polyline>(折线)不会自动闭合图形，<polygon>(多边形)会自动闭合图形

<path> 任意路径

属性	描述
d	路径命令

路径命令	描述
大写字母	绝对坐标
小写字母	相对坐标（相对于 当前位置）
M x,y	向点(x, y)移动画笔
m dx,dy	向相对位置(dx, dy)移动画笔
L x,y	从 当前位置 向点(x, y)绘制线段
l dx,dy	向 当前位置 的相对位置(dx, dy)绘制线段
H x	从 当前位置 绘制水平线至x处
h dx	向相对位置dx绘制水平线
V y	从 当前位置 绘制垂直线至y处
v dy	向 相对位置dy绘制垂直线
A rx,ry x-axis-rotation large-arc-flag sweep-flag x,y	rx,ry：椭圆半径；x-axis-rotation：旋转（弧度）；large-arc-flag：劣弧0，优弧1；sweep-flag：逆时针0，顺时针1；x,y终点坐标
a rx,ry x-axis-rotation large-arc-flag sweep-flag dx,dy	rx,ry：椭圆半径；x-axis-rotation：旋转（弧度）；large-arc-flag：劣弧0，优弧1；sweep-flag：逆时针0，顺时针1；dx,dy终点相对坐标
Q x1,y1 x,y	以 当前位置 为起点，(x1, y1)为控制点，(x, y)为终点绘制二次贝塞尔曲线
q dx1,dy1 dx,dy	以 当前位置 为起点，相对位置(dx1, dy1)为控制点，相对位置(dx, dy)为终点绘制二次贝塞尔曲线
T x,y	通过上一个二次贝赛尔曲线命令的控制点推算出控制点，以(x, y)为终点绘制二次贝赛尔曲线
t dx,dy	通过上一个二次贝赛尔曲线命令的控制点推算出控制点，以相对位置(dx, dy)为终点绘制二次贝赛尔曲线
C x1,y1 x2,y2 x,y	以 当前位置 为起点，(x1, y1)为起点控制点，(x2, y2)为终点控制点，(x, y)为终点绘制三次贝塞尔曲线
c dx1,dy1 dx2,dy2 dx,dy	以 当前位置 为起点，相对位置(dx1, dy1)为起点控制点，(dx2, dy2)为终点控制点，(dx, dy)为终点绘制三次贝塞尔曲线
S x2,y2 x,y	通过上一个三次贝赛尔曲线命令的终点控制点推算出起点控制点，以(x2, y2)为终点控制点，(x, y)为终点绘制三次贝赛尔曲线
s dx2,dy2 dx,dy	通过上一个三次贝赛尔曲线命令的终点控制点推算出起点控制点，以相对位置(dx2, dy2)为终点控制点，(dx, dy)为终点绘制三次贝赛尔曲线
Z 或 z	闭合路径

椭圆弧large-arc-flag和sweep-flag命令图解（左上角起点，右下角终点）

二次贝赛尔曲线(Q/q)

自动平滑的二次贝赛尔曲线(T/t)

三次贝赛尔曲线(C/c)

自动平滑的三次贝赛尔曲线(S/s)

提示

<polyline>(折线) 与 <polygon>(多边形) 的区别：
<polyline>(折线)不会自动闭合图形，<polygon>(多边形)会自动闭合图形