【SVG】SVG快速入门

- 日理万妓 2022-06-02 07:20 386阅读 0赞

# 前言 #

SVG 指可缩放矢量图形，是用于描述二维矢量图形的一种图形格式。SVG 中预定了七种形状元素，分别是：

1.  矩形
2.  圆形
3.  椭圆形
4.  线段
5.  折线
6.  多边形
7.  路径

--------------------

# 1、矩形和圆角矩形 #

矩形的参数共有六个：

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

下面分别绘制一个直角矩形和圆角矩形：

![这里写图片描述][SouthEast]

--------------------

# 2、圆形和椭圆形 #

圆形的参数共有五个：

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

下面分别绘制一个圆形和椭圆形：

![这里写图片描述][SouthEast 1]

--------------------

# 3、线段 #

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

*  x1：起点的 x 坐标
 *  y1：起点的 y 坐标
 *  x2：终点的 x 坐标
 *  y2：终点的 y 坐标

下面绘制一个线段：

![这里写图片描述][SouthEast 2]

--------------------

# 4、多边形和折线 #

多边形和折线的参数是一样的，都只有一个 points 参数，这个参数的值是一系列点坐标。不同之处是多边形会将终点和起点连接起来，而折线不连接。下面的代码分别绘制多边形和折线：

![这里写图片描述][SouthEast 3]

--------------------

# 5、路径 #

标签的功能最丰富，前面列举的图形都可以用路径绘制出来。于多边形和折线类似，路径也是通过一系列点坐标来绘制。其用法是：给出一个坐标点，在坐标点前面添加一个英文字母，表示是如何运动到此坐标点的。英文字母按照功能可分为五类：

1.  移动类

*  M=moveto：将画笔移动到指定坐标

1.  直线类

*  L=lineto：画直线到指定坐标
 *  H=horizontal lineto：画水平直线到指定坐标
 *  V=vertical lineto：画垂直直线到指定坐标

1.  曲线类

*  C=curveto：画三次贝塞尔曲线经两个指定控制点到达终点坐标
 *  S=shorthand/smooth curveto：与前一条贝塞尔曲线相连，第一个控制点为前一条曲线第二个控制点的对称点，只需输入第二个控制点和终点，即可绘制一个三次贝塞尔曲线
 *  Q=quadratic Bezier curveto：画二次贝塞尔曲线经一个指定控制点到达终点坐标
 *  T=Shorthand/smooth quadratic Bezier curveto：与前一条二次贝塞尔曲线相连，控制点为前一条二次贝塞尔曲线控制点的对称点，只需输入终点，即可绘制一个二次贝塞尔曲线

1.  弧线类

*  A=elliptical arc：画椭圆曲线到指定坐标

1.  闭合类

*  Z=closepath：绘制一条直线连接终点和起点，用来封闭图形

上述命令都是用大写英文字母，表示坐标系中的绝对坐标。也可用小写英文字母，表示相对坐标（相对当前画笔所在点）。下面介绍其使用方法。

## 1）绘制直线 ##

![这里写图片描述][SouthEast 4]

## 2）绘制三次贝塞尔曲线 ##

C后接三个坐标，分别为两个控制点和终点；S后接两个坐标，分别为第二个控制点和终点。S会根据之前的曲线自动生成一个控制点。  
![这里写图片描述][SouthEast 5]

## 3）绘制二次贝塞尔曲线 ##

![这里写图片描述][SouthEast 6]

--------------------

# 6、弧线 #

弧线是根据椭圆形来绘制的，有以下参数：

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

下面绘制一条弧线：

![这里写图片描述][SouthEast 7]

--------------------

# 7、文字 #

在SVG中可以使用  标签绘制文字，其属性如下：

*  x：文字位置的 x 坐标
 *  y：文字位置的 y 坐标
 *  dx：相对于当前位置在 x 方向上平移的距离（值为正则往右，负则往左）
 *  dy：相对于当前位置在 y 方向上平移的距离（值为正则往下，负则往上）
 *  textLength：文字的显示长度（不足则拉长，足则压缩）
 *  rotate：旋转角度（顺时针为正，逆时针为负）

![这里写图片描述][SouthEast 8]

--------------------

# 8、样式 #

常见的样式有以下这些：

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

## 1）stroke-linecap ##

![这里写图片描述][SouthEast 9]

## 2）stroke-dasharray ##

![这里写图片描述][SouthEast 10]

## 3）stroke-dashoffset ##

定义一条线、文本或元素距离

stroke-dasharray和stroke-dashoffset结合可以做出炫酷的动画

![在这里插入图片描述][20181210230058743.gif]

## 4）带边框的文字 ##

<?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    	
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 80">
        <defs>
            <style>
            text {  
            fill: #e96; font-size:60px;
            font-family: Futura Condensed ExtraBold, Arial Black, sans-serif;
            stroke: black; stroke-width: 2px;
            }
            </style>
        </defs>
        <text y="60">STROKED SVG TEXT</text>
    </svg>

![在这里插入图片描述][20181210223128367.png]

--------------------

# 9、标记 #

marker 定义一组标记，defs 定义可重复利用的图形。marker 有一些属性：

*  viewBox：坐标系的区域
 *  refX，refY：在 viewBox 内的基准点，绘制时此点在直线端点上
 *  markerUnits：标记大小的基准，有两个值，即 strokeWidth 和 userSpaceOnUse（线前端的大小）
 *  markerWidth，markerHeight：标记的大小
 *  orient：绘制方向，可设定为auto和角度值
 *  id：标记的 id 号

这个SVG包含了一个 `marker`，以及一条引用 `marker` 的基础图形 `line`。我们先来看看 `marker` 标签中的内容。它是包含在 `<defs>` 标签中的，所以它暂时不会被渲染出来。

在 `marker` 标签内是 `path`，创建了一个红色的小三角形。前面我们介绍过 `line` 路径命令，这条 `path` 绘制的就是从(0,0)点开始，绘制一条直线到点(0,6)，然后再画一条线到(9,3)，然后 `z` 命令关闭路径，也就是画一条线回到点(0,0)，路径使用了\#f00即红色填充。

我们先忽略 `marker` 中的内容（除了id=“arrow”）的属性，看看 `line` 元素。这是一条黑色（\#000）的水平线，宽度为5px，从点(50,50)连到点(250,50)。  
在 `line` 元素的结尾，有一个属性叫 `marker-end`，通过"url(\#arrow)"引用了前面定义的marker，结果如下：

![这里写图片描述][SouthEast 11]

--------------------

# 10、滤镜 #

SVG可用的滤镜是：

*  feBlend - 与图像相结合的滤镜
 *  feColorMatrix - 用于彩色滤光片转换
 *  feComponentTransfer
 *  feComposite
 *  feConvolveMatrix
 *  feDiffuseLighting
 *  feDisplacementMap
 *  feFlood
 *  feGaussianBlur
 *  feImage
 *  feMerge
 *  feMorphology
 *  feOffset - 过滤阴影
 *  feSpecularLighting
 *  feTile
 *  feTurbulence
 *  feDistantLight - 用于照明过滤
 *  fePointLight - 用于照明过滤
 *  feSpotLight - 用于照明过滤

feGaussianBlur 实例

![这里写图片描述][SouthEast 12]

--------------------

# 11、渐变 #

SVG中有线性渐变 `<linearGradient>` 和放射性渐变 `<radialGradient>`

![这里写图片描述][SouthEast 13]

若将x1、y1、x2、y2分别变为0%、0%、0%、100%，则可变为垂直渐变。

[SouthEast]: /images/20220602/c94fce8f135e48849d5f6637e8329871.png
[SouthEast 1]: /images/20220602/5345479c3e4240e1bbf52e7a440dcdf5.png
[SouthEast 2]: /images/20220602/69fbc9f65e5c480a903d72fa3447c2c3.png
[SouthEast 3]: /images/20220602/4f492775a41a4d679bec618af423441c.png
[SouthEast 4]: /images/20220602/ab6248abcaaf4cddb36d5e803a4336fd.png
[SouthEast 5]: /images/20220602/fbe7f0e774094bdda3c4f39df2f26623.png
[SouthEast 6]: /images/20220602/39a1770f910041fa97792aef8e570b26.png
[SouthEast 7]: /images/20220602/afec384f28404449b8edb740d110aeea.png
[SouthEast 8]: /images/20220602/c9343afd863f4be79d851eced3b79240.png
[SouthEast 9]: /images/20220602/b3d516b11ef24849a668163d6c6e88d1.png
[SouthEast 10]: /images/20220602/9650a43ef8e141be86fe9e0e30ea7df6.png
[20181210230058743.gif]: /images/20220602/9ee42aa5d889444f874d97b862573482.png
[20181210223128367.png]: /images/20220602/711b070f97ed4e2db91aa485b4a4a434.png
[SouthEast 11]: /images/20220602/78bf90372c2d45cf8cf2a675f8bc1a80.png
[SouthEast 12]: /images/20220602/00165ccca46a42f5bccb054acafc773c.png
[SouthEast 13]: /images/20220602/ab54104c9eb84074878111f3ff2f0d61.png