基础知识

svg

描述

所有的svg元素都应放在svg标签下才可以生效，svg实际上是用于显示所创建的svg矢量图的一个画布

属性

参数

描述

width

svg画布的真实宽度

height

svg画布的真实高度

viewBox

视野，用于规定svg画布显示的位置以及显示的范围，由4个参数x，y，w，h控制

viewBox详解：

首先，对于svg的是没有边界的，svg画布只是用于展示svg世界中某一个范围的内容，而对于超过了svg画布范围的内容，则会被遮挡。默认svg画布默认显示世界坐标下原点坐标的width*height面积的矩形视野。

我们可以通过viewBox来修改默认的显示配置，viewBox由4个点组成，viewBox=“x, y, w, h”；其中x，y就是用于定义svg画布在世界坐标下的位置，通过修改x，y可以移动画布在世界坐标下的位置。而w，h则是定义svg画布的视野区域；默认情况下viewBox=“0,0,width,height”

  1. 当w<width、h<height的时候，相当于是拉近了视野，视野小了，但实际显示的区域没有发生变化；这就会导致显示的图形变大，显示的区域变小。
  2. 当w>width、h>height的时候，相当于拉远了视野，视野变大了，但实际显示的区域没有发生变化；这就会导致显示的图形变小，显示的区域变大。

示例

<svg 
     xmlns="http://www.w3.org/2000/svg" 
     version="1.1"
     width="400px" 
     height="400px"
     viewBox="20,20,400,400"
     >
  <ellipse cx="0" cy="0" rx="5" ry="5" style="fill:aquamarine;stroke-width:0"></ellipse>
  <rect x="0" y="0" width="100" height="100" stroke="red" stroke-width="1" fill="none"></rect>
  <rect x="300" y="300" width="100" height="100" style="stroke:cadetblue;stroke-width:1;fill:none"></rect>
</svg>

显示属性

描述

用于规定svg元素的样式显示属性，包括颜色，边框，线宽等属性，显示属性既可以作为元素的属性也可作为css样式属性来生效，如红色的2p边框

普通属性：stroke=“red” stroke-width=“2”;

css属性：style=“stroke:red;stroke-width=2”

两种方式都是可以实现红色的2px边框

属性

参数

描述

值

fill

填充图形颜色

颜色，渐变

stroke

绘制图形的边框颜色

颜色，渐变

stroke-width

绘制图形的边框宽度

数值

stroke-linejoin

线条连接处样式

miter|round|bevel

stroke-linecap

线条首尾处样式

butt|round|square

transform

属性变换

translate|scale|rotate

transform-origin

变换中心

数值|百分比|位置

图形绘制

直线

描述

绘制一条直线

属性

参数

是否必须

描述

x1

否

直线起点的x坐标，默认是0

y1

否

直线起点的y坐标，默认是0

x2

是

直线终点的x坐标

y2

是

直线终点的y坐标

style

否

显示样式，主要用于规定了绘制矩形的样式属性，详情参考显示属性

示例

<svg 
     xmlns="http://www.w3.org/2000/svg" 
     version="1.1"
     width="400" 
     height="200"
     >
  <line x1="40" y1="10" x2="200" y2="89" style="stroke:burlywood;stroke-width:2"></line>
</svg>

矩形

描述

绘制一个直角/圆角矩形

属性

参数

是否必须

描述

x

否

矩形左上角的x坐标，默认是0

y

否

矩形左上角的y坐标，默认是0

rx

否

矩形水平方向的圆角半径，默认是0

ry

否

矩形垂直方向的圆角半径，默认与rx相等

width

是

矩形宽度

height

是

矩形高度

style

否

显示样式，主要用于规定了绘制矩形的样式属性，详情参考显示属性

示例

<svg 
     xmlns="http://www.w3.org/2000/svg" 
     version="1.1"
     width="400" 
     height="200"
     >
  <text x="10" y="30">直角矩形</text>
  <text x="200" y="30">圆角矩形</text>
  <rect x="10" y="50" width="150" height="100" style="fill:azure;stroke:burlywood;stroke-width:2"></rect>
  <rect x="200" y="50" rx="15" ry="15" width="150" height="100" fill="azure" stroke="burlywood" stroke-width="2"></rect>
</svg>

椭圆

描述

绘制一个椭圆，包括圆

属性

参数

是否必须

描述

cx

否

圆心的x坐标，默认是0

cy

否

圆心的y坐标， 默认是0

rx

是

圆心的长轴半径

ry

否

圆心的短轴半径，默认为rx的值

style

否

显示样式，主要用于规定了绘制矩形的样式属性，详情参考显示属性

示例

<svg 
     xmlns="http://www.w3.org/2000/svg" 
     version="1.1"
     width="400" 
     height="200"
     >
  <text x="30" y="30">椭圆</text>
  <text x="200" y="30">特殊的椭圆</text>
  <ellipse cx="100" cy="100" rx="80" ry="50" style="fill:azure;stroke:burlywood;stroke-width:2"></ellipse>
  <ellipse cx="250" cy="100" rx="50" ry="50" style="fill:azure;stroke:burlywood;stroke-width:2"></ellipse>
</svg>

圆

描述

绘制一个圆

属性

参数

是否必须

描述

cx

否

圆心的x坐标，默认是0

cy

否

圆心的y坐标， 默认是0

r

是

圆的半径

style

否

显示样式，主要用于规定了绘制矩形的样式属性，详情参考显示属性

示例

多边形

描述

绘制一个三边以上的图形

属性

参数

是否必须

描述

points

是

图形上点的坐标集合

style

否

显示样式，主要用于规定了绘制矩形的样式属性，详情参考显示属性

points详解：

points是图形顶点的集合，坐标之间与点之间使用空格或逗号来隔开，比如points="x1 y1 x2 y2 x3 y3"或者points=“x1,y1,x2,y2,x3,y3”；但为了显示方便与规范，统一坐标之间用逗号隔开，点之间用空格隔开，如points=“x1,y1 x2,y2 x3,y3”

图形的绘制是根据points的点坐标从左向右开始，如，对于points=“x1,y1 x2,y2 x3,y3 x4,y4”；图形从（x1,y1）开始，然后连接（x2,y2），在连接（x3,y3），再连接（x4,y4），最后首尾相连（连接起点x1，y1），最终形成闭合的图形。

示例

<svg 
     xmlns="http://www.w3.org/2000/svg" 
     version="1.1"
     width="400" 
     height="200"
     >
  <polygon
           points="90,10 110,50 170,50 110,70 150,120 90,80 50,120 70,70 30,50 80,50"
           style="fill:azure;stroke:burlywood;stroke-width:2;stroke-linejoin:round"></polygon>
</svg>

曲线

描述

绘制一条曲线

属性

参数

是否必须

描述

points

是

曲线上点的坐标集合

style

否

显示样式，主要用于规定了绘制矩形的样式属性，详情参考显示属性

points详解：

曲线的points参数与多边形的points是类似的，都是点的集合，而且是从左向右开始绘制；

但区别在于，多边形再绘制完最后一个点的时候会连接起点形成闭合图形，而曲线则不会，仅从第一个点绘制到最后一个点便结束绘制了

示例

<svg 
     xmlns="http://www.w3.org/2000/svg" 
     version="1.1"
     width="400" 
     height="200"
     >
  <polyline
            points="90,10 110,50 170,50 110,70 150,120 90,80 50,120 70,70 30,50 80,50"
            style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"></polyline>
</svg>

路径

描述

用于绘制非常规图形或者线条的绘制

属性

参数

是否必须

描述

d

是

绘制路径的指令以及参数

style

否

显示样式，主要用于规定了绘制矩形的样式属性，详情参考显示属性

d详解：

大写的指令代表了绝对定位，而小写则代表相对定位；

指令

参数

描述

M

x y

将当前的起始位置移动到x, y

L

x y

将路径当前结束位置与x, y相连接

H

x

将路径当前结束位置与x, 当前位置y相连接

V

y

将路径当前结束位置与当前位置y, x相连接

Q

cx cy px py

由一个控制点C与结束点P来控制二次贝塞尔曲线的绘制

C

cx1 cy1 cx2 cy2 px py

由两个控制点C1,C2和结束点来控制三次贝塞尔曲线的绘制

T

x y

由一个控制点(默认是上一个锚点的镜像)，和结束点来绘制光滑的二次贝塞尔曲线

S

cx1 cy1 px py

由两个控制点(默认是上一个锚点的镜像)和C1以及一个结束点P来绘制光滑的三次贝塞尔曲线

A

rx ry xa lf sf ex ey

由七个参数控制，详情看A指令

Z

无

结束绘制并连接起点

L指令

描述

代表连接的意思；Lx1,y1，连接到点（x1,y1）

示例

<svg 
     xmlns="http://www.w3.org/2000/svg" 
     version="1.1"
     width="400" 
     height="200"
     >
  <path
        d="M20,90 L30,10 L100,100 L190,20 Z"
        style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"
        ></path>
</svg>
H指令

描述

连接到水平线上的某个点

示例

<svg 
     xmlns="http://www.w3.org/2000/svg" 
     version="1.1"
     width="400" 
     height="200"
     >
  <path
        d="M20,90 H100"
        style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"
        ></path>
</svg>
V指令

描述

连接到垂直线上的某个点

示例

<svg 
     xmlns="http://www.w3.org/2000/svg" 
     version="1.1"
     width="400" 
     height="200"
     >
  <path
        d="M20,20 V100"
        style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"
        ></path>
</svg>
Q指令

描述

绘制一条二次贝塞尔曲线，二次贝塞尔曲线由一个起点、一个控制点和一个结束点来控制

示例

<svg 
     xmlns="http://www.w3.org/2000/svg" 
     version="1.1"
     width="400" 
     height="200"
     >
  <path
        d="M20,20 Q100,50,80,120"
        style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"
        ></path>
  <circle cx="20" cy="20" r="2" style="fill:cadetblue;stroke:none"></circle>
  <text x="30" y="20">起点</text>
  <circle cx="100" cy="50" r="2" style="fill:cadetblue;stroke:none"></circle>
  <text x="110" y="50">控制点</text>
  <circle cx="80" cy="120" r="2" style="fill:cadetblue;stroke:none"></circle>
  <text x="90" y="120">结束点</text>
</svg>
C指令

描述

绘制一条三次贝塞尔曲线，三次贝塞尔曲线由一个起点、一个结束点和两个控制点来控制

示例

<svg 
     xmlns="http://www.w3.org/2000/svg" 
     version="1.1"
     width="400" 
     height="200"
     >
  <path
        d="M20,20 C100,10 200,50,80,120"
        style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"
        ></path>
  <circle cx="20" cy="20" r="2" style="fill:cadetblue;stroke:none"></circle>
  <text x="30" y="20">起点</text>
  <circle cx="100" cy="10" r="2" style="fill:cadetblue;stroke:none"></circle>
  <text x="110" y="20">控制点1</text>
  <circle cx="200" cy="50" r="2" style="fill:cadetblue;stroke:none"></circle>
  <text x="210" y="50">控制点2</text>
  <circle cx="80" cy="120" r="2" style="fill:cadetblue;stroke:none"></circle>
  <text x="90" y="120">结束点</text>
</svg>
T指令

T指令是用于创建平滑的二次贝塞尔曲线，T指令只需规定结束点的位置，其控制点的位置应为其上一个控制点关于该结束点对称点，如果上一个控制点不存在，则最后一个锚点的位置即为控制点的位置

示例

<svg 
     xmlns="http://www.w3.org/2000/svg" 
     version="1.1"
     width="400" 
     height="200"
     >
  <path
        d="M20,20 T50,30 T90,100 T10,150"
        style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"
        ></path>
  <!-- 锚点 -->
  <text x="20" y="10" style="font-size:10;">P0</text>
  <text x="40" y="40" style="font-size:10;">P1</text>
  <text x="95" y="100" style="font-size:10;">P2</text>
  <text x="10" y="160" style="font-size:10;">P3</text>

  <!-- 控制点 -->
  <text x="85" y="40" style="font-size:10;">C1：控制点1，锚点P0关于锚点P1对称点</text>
  <text x="105" y="160" style="font-size:10;">C2：控制点2，控制点C1关于锚点P2对称点</text>

  <circle cx="80" cy="40" r="2" style="fill:brown;stroke:none"></circle>
  <circle cx="100" cy="160" r="2" style="fill:brown;stroke:none"></circle>
  <line x1="50" y1="30" x2="80" y2="40" style="stroke:brown;"></line>
  <line x1="100" y1="160" x2="80" y2="40" style="stroke:brown;"></line>
  <line x1="100" y1="160" x2="10" y2="150" style="stroke:brown;"></line>

  <circle cx="20" cy="20" r="2" style="fill:cadetblue;stroke:none"></circle>
  <circle cx="50" cy="30" r="2" style="fill:cadetblue;stroke:none"></circle>
  <circle cx="90" cy="100" r="2" style="fill:cadetblue;stroke:none"></circle>
  <circle cx="10" cy="150" r="2" style="fill:cadetblue;stroke:none"></circle>
</svg>
S指令

描述

创建平滑的三次贝塞尔曲线，S指令需规定一个控制点和一个结束点，与T指令类似，其第一个控制点的位置应为其上一个控制点关于该结束点的对称点，如果上一个控制点不存在，则最后一个锚点的位置即为第一个控制点的位置；第二个控制点由S指令来规定；

示例

<svg 
     xmlns="http://www.w3.org/2000/svg" 
     version="1.1"
     width="400" 
     height="200"
     >
  <path
        d="M20,20 S100,30,70,40 S120,150,60,120"
        style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"
        ></path>

  <!-- 控制点 -->
  <circle cx="100" cy="30" r="2" style="fill:brown;stroke:none"></circle>
  <circle cx="40" cy="50" r="2" style="fill:brown;stroke:none"></circle>
  <circle cx="120" cy="150" r="2" style="fill:brown;stroke:none"></circle>
  <line x1="100" y1="30" x2="40" y2="50" style="stroke:brown;"></line>
  <line x1="60" y1="120" x2="120" y2="150" style="stroke:brown;"></line>

  <!-- 锚点 -->
  <circle cx="20" cy="20" r="2" style="fill:cadetblue;stroke:none"></circle>
  <circle cx="70" cy="40" r="2" style="fill:cadetblue;stroke:none"></circle>
  <circle cx="60" cy="120" r="2" style="fill:cadetblue;stroke:none"></circle>
</svg>
A指令

描述

A指令用于绘制一段弧线，弧线实际是一个取自椭圆上两个点之间的弧，第一个点是路径最后一个锚点，第二个是结束点，弧线的细节由几个主要的参数控制

参数

描述

rx

椭圆长轴半径

ry

椭圆短轴半径

xa

椭圆与x轴的夹角

lf

所取的弧大小，1取大弧，0取小弧

sf

绘制弧线的方向，1顺时针绘制，0逆时针绘制

ex

结束点的x坐标

ey

结束点的y坐标

示例

<svg 
     xmlns="http://www.w3.org/2000/svg" 
     version="1.1"
     width="400" 
     height="200"
     >
  <text x="10" y="100" style="font-size:10;">xa=0,lf=0,sf=0</text>
  <path d="M30,30 A40,30,0,0,0,80,70"style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"></path>

  <text x="120" y="100" style="font-size:10;">xa=50,lf=0,sf=0</text>
  <path d="M130,30 A40,30,50,0,0,180,70"style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"></path>

  <text x="230" y="100" style="font-size:10;">xa=0,lf=1,sf=0</text>
  <path d="M250,30 A40,30,0,1,0,300,70"style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"></path>

  <text x="10" y="190" style="font-size:10;">xa=0,lf=0,sf=1</text>
  <path d="M30,130 A40,30,0,0,1,80,170"style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"></path>

  <text x="120" y="190" style="font-size:10;">xa=50,lf=1,sf=1</text>
  <path d="M130,130 A40,30,0,1,1,180,170"style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"></path>
</svg>