本文共 4347 字，大约阅读时间需要 14 分钟。

什么是SVG

svg是指可缩放矢量图形，是用于描述二维矢量图形的一种图形格式。svg使用XML格式来定义图形，除ie8之前版本外，绝不部分浏览器均支持svg，可将svg文本直接嵌入HTML中显示。

svg优点是文件小、缩放旋转均不会失真、线条颜色平滑无锯齿。

svg矢量图是用数学方法描述的图，不适合表现自然度较高且复杂多变的图。

svg图形元素

使用svg中的图形元素前，首先要定义一组<svg>标签元素，并向该标签添加属性width和height，分别表示绘制区域的宽度和高度。

需要绘制的图形元素都要添加之前定义的一组<svg></svg>之间。

svg中定义了七种形状元素：矩形<rect>、圆形<circle>、椭圆<ellipse>、线段<line>、折线<polyline>、多边形<polygon>、路径<path>。

①.矩形

矩形的参数有6个：

• x: 矩形左上角的x坐标
• y: 矩形左上角的y坐标
• width: 矩形的宽度
• height：矩形的高度
• rx：对于圆角矩形，指定椭圆在x方向的半径
• ry：对于圆角矩形，指定椭圆在y方向的半径

示例代码：

效果截图：

②.圆形与椭圆形

圆形的参数有3个：

• cx: 圆心的x坐标
• cy: 圆心的y坐标
• r: 圆的半径

椭圆的参数类似于圆形，只是半径分为水平半径和垂直半径

• cx: 圆心的x坐标
• cy： 圆心的y坐标
• rx: 椭圆的水平半径
• ry: 椭圆的垂直半径

示例代码

效果截图：

③.线段

线段的参数是起点和终点的坐标。

• x1：起点的x坐标
• y1: 起点的y坐标
• x2: 终点的x坐标
• x3：终点的y坐标

示例代码：

效果截图：

④.多边形和折线

多边形和折线的参数相同，都只有一个points参数。这个参数的值是一系列的点坐标，不同之处是多边形会将起点与终点连接起来，而折线不会。

示例代码：

效果截图：

⑤.路径

<path>标签的功能是所有图形元素中最强大的，所有其他图形元素都可以用路径<path></path>来制作出来。类似于折线，路径也是通过一系列点坐标来绘制的。

其用法是：给出一个坐标点，在坐标点前添加一个英文字母，表示如何运动到此坐标点的。

英文字母按照功能可以分成五类：

• 移动类
  1. M = moveto：将画笔移动到指定坐标。
• 直线类
  1. L = lineto：画直线到指定坐标
  2. H = horizontal lineto：画水平直线到指定坐标
  3. V = vertical lineto：画垂直直线到指定坐标
• 曲线类
  1. C = curveto：画三次贝塞尔曲线经两个指定控制点到达终点坐标
  2. S = shorthand/smooth curveto：与前一条三次贝塞尔曲线相连，第一个控制点为前一条曲线第二个控制点的对称点，只需输入第二个控制点和终点，即可绘制一个三次贝塞尔曲线
  3. Q = quadratic Bezier curveto：画二次贝塞尔曲线经一个指定控制点到达终点坐标
  4. T = shorthand/smooth quadratic Bezier curveto：与前一条二次贝塞尔曲线相连，控制点为前一条二次贝塞尔曲线控制点的对称点，只需输入终点，即可绘制一条二次贝塞尔曲线。
• 弧线类
  1. A = elliptical arc：画椭圆曲线到达指定坐标
• 闭合类
  1. Z = closepath：绘制一条直线连接起点和终点，用来封闭图形。

注意：以上命令均为大写表示，表示坐标系中的绝对坐标。也可以使用小写字母，表示的是相对坐标，也就是相对当前画笔所在点。

绘制直线：

效果截图：

绘制三次贝塞尔曲线：

效果截图：

绘制二次贝塞尔曲线：

效果截图：

绘制弧线，添加闭合：

弧线是根据椭圆来绘制的，对应的参数为A( rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y )。

• rx：椭圆x方向的半轴大小
• ry：椭圆y方向的半轴大小
• x-axis-rotation：椭圆的x轴与水平轴顺时针方向的夹角
• large-arc-flag：有两个值，(1：大角度弧线；0：小角度弧线)
• sweep-flag：有两个值，(1：顺时针到终点；0：逆时针到终点)
• x：终点x坐标
• y：终点y坐标

上述弧线示例代码的含义就是：起始画笔的位置是M100,200，a用了小写字母，表示相对坐标，则终点位置就是100+150, 200-150。包含弧线的椭圆的x和y方向的半径分别是200和150，椭圆x轴与水平轴的夹角是0度，采用了大角度弧线、逆时针走向终点。最后的Z表示将起点与终点闭合。

效果截图：

⑥.文字

在svg中可以使用<text>标签绘制文字，其属性如下：

• x：文字位置的x坐标
• y: 文字位置的y坐标
• dx：相对于当前位置在x方向上平移的距离(值为正则往右，负则往左)
• dy：相对于当前位置在y方向上平移的距离(值为正则往下，负则往上)
• textLength：文字的显示长度(不足则拉长，足则压缩)
• rotate：旋转角度(顺时针为正，逆时针为负)
• 如果要对文字中某一部分文字单独设置样式，可使用<tspan></tspan>标签

   
    
      I Love 
     
      D3
      
    
   

效果截图：

⑦.样式

svg中的样式，可以使用class类，也可以直接在元素中写样式。

直接在元素中写样式时支持两种写法：单独写、合并写。

单独写：<line fill="yellow" stroke="blue" stroke-width="4" x1="20" y1="20" x2="100" y2="100"></line>

合并写：<line style="fill:white;stroke:black;stroke-width:3" x1="20" y1="20" x2="100" y2="100"></line>

常见样式如下：

• fill：填充色，也可用于改变文字<text>的颜色
• stroke：边框的颜色
• stroke-width：边框的宽度
• stroke-linecap：线头端点的样式，圆角、直角等
• stroke-dasharray：虚线的样式
• opacity：透明度，0.0为完全透明，1.0为完全不透明
• font-family：字体
• font-size：字体大小
• font-weight：字体粗细，有normal、bold、bloder、lighter可选
• font-style：字体的样式，斜体等
• text-decoration：上划线、下划线等

⑧.标记

标记<marker>可以贴附于<path>、<line>、<polyline>、<polygon>元素上。最典型应用是给线段添加箭头。

标记<marker>写在<defs></defs>之间。<defs>用于定义可重复利用的图形元素。

标记<marker>内有这些属性：

• viewBox：坐标系的区域
• refX、refY：在viewBox内的基准点，绘制时此点在直线端点上
• markerUnits：标记大小的基准，有两个值，即strokeWidth(线的宽度)和userSpaceOnUse(线前端的大小)
• markerWidth、markerHeight：标识的大小
• orient：绘制方向，可设定为auto(自动确认方向)和角度值
• id：标识的id号

然后就在<marker></marker>标签中定义图形，当调用这个标记时，就会绘制标记里的图形。

以定义一个箭头并调用为例：

其中#arrow表示使用id为arrow的标记。marker-start表示路径起点处，marker-mid表示路径中间端点处，marker-end表示路径终点处。由于使用marker-mid将绘制在路径的节点处，所以对于只有起点和终点的直线<line></line>，使用marker-mid无效。

效果截图：

⑨.滤镜

滤镜的标签是<filter>，和标记一样，也是定义在<defs>中的。

滤镜的种类很多，比如feMorpholoty、feGaussianBlur、feFlood等，还有定义光源的滤镜如feDistantLight、fePointLight、feSpotLight等。

以feGaussianBlur高斯模糊滤镜为例，其中in是使用滤镜的对象，stdDeviation是高斯模糊唯一的参数，数值越大，模糊程序越高：

效果截图：

⑩.渐变

渐变表示一种颜色平滑过渡到另一种颜色。SVG有线性渐变<linerGradient>和放射性渐变<radialGradient>。

渐变也是定义在<defs>标签中。

其中x1、y1、x2、y2定义渐变的方向。offset定义渐变开始的位置，stop-color定义此位置的颜色。

效果截图：

喜欢本文请扫下方二维码，关注微信公众号： 前端小二，查看更多我写的文章哦，多谢支持。

转载地址：http://aegx.baihongyu.com/