SVG

最后更新于：2022-04-01 23:55:03

## SVG：可伸缩的矢量图形 这里只是简要的介绍一下SVG，如要深入，推荐看《SVG经典入门》 **1、SVG** **1.1 概述** SVG是一种用于描述图形的XML语法。由于结构是XML格式，使得它可以插入HTML文档，成为DOM的一部分，然后用JavaScript和CSS进行操作。 一个简单的SVG文件如下： ``` ``` **1.2 使用方法** 要使用SVG有很多方法，最简单的就是直接将SVG代码嵌入到HTML中： ``` ``` SVG代码也可以单独写在一个文件中，后缀是“.svg”，然后用在`、、、 ``` **1.3 基本图形** **（1）矩形** ``` ``` 属性说明： rect 元素的 `width` 和 `height` 属性可定义矩形的高度和宽度 `style` 属性用来定义 CSS 属性 - fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值） - fill-opacity属性定义填充颜色的透明度 - stroke-width 属性定义矩形边框的宽度 - stroke 属性定义矩形边框的颜色 - stroke-opacity属性定义笔触颜色的透明度 - opacity属性定义元素的透明度 - rx和ry属性定义矩形圆角 下面的其他图形都支持style属性，而且可以单独作为属性添加。 **（2）圆形** ``` ``` 属性说明： - cx和cy属性定义圆点的x和y坐标，如果省略，则默认为(0,0) - r属性定义圆的半径 **（3）椭圆** ``` ``` 属性说明： - cx和cy属性定义椭圆的中心的x和y坐标 - rx定义水平半径 - ry定义垂直半径 **（4）直线** ``` ``` 属性说明： - x1和y1表示起始点的x和y坐标 - x2和y2表示结束点的x和y坐标 **（5）多边形** ``` ``` 属性说明： - points属性定义多边形每个角的x和y坐标，x和y坐标之间用逗号隔开，每个坐标点之间用空格隔开 **（6）曲线** ``` ``` - points属性定义多边形每个角的x和y坐标，x和y坐标之间用逗号隔开，每个坐标点之间用空格隔开 **（7）文本** ``` I love SVG ``` **（8）路径** ``` ``` 属性说明： - d属性定义一组路径数据，一对坐标值的x和y坐标之间可以用空格或逗号隔开，但坐标对与坐标对之间只能用空格分隔。 - pathLength属性定义路径总长度，不允许负值 绘图指令： ``` M moveto，表示移动，后跟着坐标点，比如150 0 L lineto，表示连接（也可以说是绘制直线），后跟着坐标点，比如75 200 H horizontal lineto，绘制水平线段 V vertical lineto，绘制垂直线段 C curveto，绘制普通的三次贝塞尔曲线（C x1 y1 x2 y2 destx desty） S smooth curveto：绘制光滑的三次贝塞尔曲线（S x2 y2 destx desty） Q quadratic Bézier curve：绘制普通的二次贝塞尔曲线 T smooth quadratic Bézier curveto：绘制光滑的二次贝塞尔曲线 A elliptical Arc：绘制椭圆弧 Z closepath，表示完成闭合路径，即将路径首尾相连，构成闭合图形 ``` 大写表示绝对定位，小写表示相对定位。 **1.4 装饰SVG** **1.4.1 stroke属性** - stroke：定义一条线，文本或元素轮廓颜色 - stroke-width：定义了一条线，文本或元素轮廓厚度 - stroke-linecap：定义不同类型的开放路径的终结（可能值：butt、round、square） - stroke-dasharray：用于创建虚线 **1.4.2 滤镜** **（1）模糊效果** 所有的SVG滤镜都定义在``元素中， ``标签用来定义SVG滤镜 例子：`` 元素是用于创建模糊效果 ``` ``` **（2）阴影** ``元素是用于创建阴影效果。 ``` ``` **1.4.3 渐变** **（1）线性渐变** ``元素用于定义线性渐变。 ``` ``` **（2）放射性渐变** ``元素用于定义放射性渐变。 ``` ``` ';