--- highlight: a11y-dark theme: juejin --- 可缩放矢量图像 ### 简单认识用于描述二维的矢量图形,基于XML的标记语言. #### 什么是矢量图形使用直线和曲线来描述的图形，构成这些图形的元素是一些点、线、矩形、多边形、圆和弧线等，它们都是通过数学公式计算获得的，具有编辑后不失真的特点。 #### 优势 1. 优雅而简洁的渲染不同大小的图形. 2. 可以和CSS、DOM、JS等其他网络标准无缝衔接. 3. 可以进行搜索、索引、编写脚本、压缩. 4. 可以使用文本编辑器或者图形编辑器编辑. 5. 无限放大而不失真,不降低质量 . ### 小试牛刀定义我们常见的几种图形:圆形、矩形、直线或曲线等复杂图形 , 支持渐变、旋转、动画、滤镜等效果. SVG基本要素`svg` 根元素和其他图形元素 , 分组元素`g` , 元素和属性必须严格按规范书写,区分大小写 . #### 绘制矩形、圆、文本简单实例: ```html ``` ![image-20210726192804508.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aa243cf6726940a5b7ee4263790e1a6c~tplv-k3u1fbpfcp-watermark.image) * `xmlns` 为空间声明, 必须存在绑定值为`http://www.w3.org/2000/svg` * `rect` - 矩形、`circle` - 圆、`text` - 文本 ; `fill` 属性为填充的颜色值 * `x\y\width\hegiht` 绘制的坐标点 , 默认左上角为起始点`(0,0)` #### 可直接嵌入HTML中使用也可通过`object` 元素嵌入或 `iframe` 嵌入 ```html

``` 可以通过JS动态创建并注入到HTML中 . #### 基本图形说明所有复杂的图形都可拆分, 并由基础的图形元素组成 . 掌握基本的图形构成, 就可以创建更为复杂的图形元素. 实例中已经基本展示矩形、圆、文本的绘制. 下面详细说明图形元素及属性. ##### 矩形 - `rect` * `x` - 左上角 * `y` - 右上角 * `width` - 宽度 * `height` - 高度 * `rx` - 圆角x方位的半径 * `ry` - 圆角y方位的半径 ```html ``` ![image-20210726195227297.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b82593e91c794a53ae017896724f502b~tplv-k3u1fbpfcp-watermark.image) 如果`rx\ry` 设置一样,则可以仅设置`rx`或`ry` ##### 圆形 - `circle` * `r` - 圆半径 * `cx` - 圆形x位置 * `cy` - 圆形y的位置 ##### 椭圆 - `ellipse` * `rx` - 椭圆x半径 * `ry` - 椭圆y半径 * `cx` - 椭圆中心x位置 * `cy` - 椭圆中心y位置 ```html ``` ![image-20210726195957205.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/11e60ef944a2429d9093b057206561bd~tplv-k3u1fbpfcp-watermark.image) ##### 线条 - `line` * `x1` - 起点x位置 * `y1` - 起点y位置 * `x2` - 终点x位置 * `y2` - 终点y位置 ##### 折线 - `polyline` * `points` - 点集数列 , 空白分割数字;逗号、换行符、空格分隔点 . 例:`2 3, 23 3,1 2` ```html ``` ![image-20210726201327772.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5ac85f2af1e147029d34417b9fbb01db~tplv-k3u1fbpfcp-watermark.image) `polyline` 绘制了矩形 , 其他属性譬如`stroke \ stroke-width` 定义绘制的颜色、绘制的宽度 ##### 多边形 - `polygon` * `points` - 点集数列 , 空白分割数字、逗号分隔点 . 例:`2 3, 23 3,1 2` 不同于折线的是,它会自动合并,即最后一个点回连接到第一个点. ```html ``` 可以看到`points` 点集中最后一个点不需要起点 . ##### 路径 - `path` * `d` - 点集数列 , 是一个`命令+参数` 的序列合集. 可以绘制任何图形,包括矩形、圆、椭圆、折线、多边形、贝塞尔曲线、二次曲线等, 绘制这些图形有许多可用的命令 , 来表示绘制意图 . 可分直线、曲线 . 这些命令大写表示绝对定位,小写表示相对定位 . ###### 直线绘制 * `M\m` 移动到某个位置 * `L\l` 从当前位置绘制线条到指定点. * `H\h` 表示在x轴移动距离, 参数只有一个. * `V\v` 表示在y轴移动距离,参数只有一个. 使用上面的命令,绘制一个矩形: 解释一下:移动起点到(50,100) - 水平移动x到 100(宽度为50) - 垂直移动到700(高度为100) - 水平移动到50 - 绘制线条(50,600) . 闭合起点. ```html ``` ![image-20210727101452144.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8f849b1337b44ec7a402a948920cfdcf~tplv-k3u1fbpfcp-watermark.image) 通过命令可简化闭合路经点: * `Z\z` 闭合路径 ```html ``` 上面都使用的大写指令,为绝对定位, 即相对于原点(0,0)绘制, 通过相对定位 , 使用小写命令简化计算. ```html ``` ###### 曲线绘制有三种绘制平滑曲线的命令, 两个用来绘制贝塞尔曲线,另一个用来绘制弧线 . * `C\c` 来创建三次贝塞尔曲线C , 定义一个点和两个控制点. ```html ``` 去掉了填充`fill="none"`, 采用了绘制`stroke="rgba(0,0,0,.6)"` , 采用了小写相对定位, 简化点坐标运算. ![image-20210727103815123.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a295bca2014d41c084069e6501b1b982~tplv-k3u1fbpfcp-watermark.image) 如果需要将多个贝塞尔曲线链接起来, 则使用一下命令: * `S\s` , 以前一个点为控制点,保持斜率一致,`参数为两个点` . 以第二个点到终点的方向结束. ```html ``` ![image-20210727105232998.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7a7c1f853b834d7fa3990fefd3f46ea4~tplv-k3u1fbpfcp-watermark.image) 如果`S` 前面不跟`C 或者 S` , 则以当前点为启动绘制一个曲线. 达到贝塞尔曲线的绘制效果 ```html ``` ![image-20210727110032206.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/34ba61f565fb436f8cfff1d60e4c6f8f~tplv-k3u1fbpfcp-watermark.image) * `Q\s` 绘制二次贝塞尔曲线Q , 只需要一个控制点和终点坐标. ```html ``` 可以得到和上面示例同样的曲线. * `T\T` 二次曲线的延伸命令, 通过前一个控制点,可以只定义终点 , 绘制曲线 T命令的前面必须是Q或者T命令. 如果单独使用,则绘制出来的是一条直线. ```html ``` ![image-20210727110845174.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a5d0c770ef74443d8e477f57ee707755~tplv-k3u1fbpfcp-watermark.image) 通过观察几个效果图 ,可以看到三次贝塞尔曲线和二次贝塞尔曲线差别于起终点的弧度 . ###### 弧形 * `A\a` 绘制弧形 , `a rx ry x-axis-rotation large-arc-flag sweep-flag x y ` 参数说明: 1. `rx ry` x 轴半径、y轴半径 2. `x-axis-rotation` 弧形的旋转角度. 3. `large-arc-flag` 角度大小 , 0 表示小角度小于180度; 1 表示大角度大于180度; 4. `sweep-flag` 表示弧线方向, 0 表示逆时针画弧 ;1 表示顺时针画弧; 5. `x y ` 弧形的终点 . ```html ``` 说明:定位(1000,50) - 以x轴半径为10,y轴半径为40 - 顺时针旋转 90 度 - 终点为(100,100) 画弧线 . ![image-20210727155052505.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2dcd3d3867954925aae0d3a5766a6d89~tplv-k3u1fbpfcp-watermark.image) 但是角度大小`large-arc-flag` 这个值,测了好多次, 都没有设置什么效果 . 此处为以上测试的图形全图 : ![image-20210727172846688.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6664c1d2a55646869f7e42921d88481b~tplv-k3u1fbpfcp-watermark.image) ### 其他标签说明还有一些辅助设计的元素标签 . #### defs * 定义需要重复使用的图形元素, 在其他地方使用 `use` 元素呈现. * 可以定义样式`style` * 定义动画、渐变元素 . * 定义脚本`script` * ... #### symbol 定义图形模版对象,可以使用`use` 元素呈现. ```html ``` #### use 可以获取到目标节点,在其他地方复制并展现 . ```html ``` ![image-20210729165336278.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f3c3d7392c7f4d98a417ee934676fd38~tplv-k3u1fbpfcp-watermark.image) #### pattern 图样模版,定义在defs 中 , 可以使用fill或者stroke 填充或描边图案 . * `x\y` - 定义开始的位置. * `width\height` - 定义当前模版站父元素的大小 ```html ``` ![image-20210729172243861.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/50241ae900814b33a91a97a66a1f9694~tplv-k3u1fbpfcp-watermark.image) #### g 组合对象的容器 . 添加到g元素上的变换会应用到所有子元素上 . #### desc 为每个元素提供描述性字符串.提升可访问性. 在元素呈现时它不会作为视图的一部分展示. #### animate 动画元素, 定义元素的某个属性在制定时间内变化. ```html ``` ![svg-animation.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f8a4a8f7074140c9b253d01420045782~tplv-k3u1fbpfcp-watermark.image) 感觉动画还挺好玩的, 还是比较自然丝滑的. 可以定义一些复杂的图形的动画. #### script JS 脚本, 可以处理DOM元素 ,比如一些点击、鼠标事件. ```html ``` ![svg-script.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/719f744178f1443a9f37e347d4d198f1~tplv-k3u1fbpfcp-watermark.image) ### 元素属性说明设置style样式等,包括颜色、宽度、高度等等 . 可以直接设置元素的属性 , 值需要引号包裹 . #### 引用属性 - `xlink:href` 可以已经定义的元素 , 包括文本、动画、样板、渐变等. 引用都必须加命名空间`xmlns:xlink` : ```html ``` 也可以直接加到跟元素`svg` 上,不需要每次都引入 . ```html ``` #### viewbox - 定义容器伸缩 * `x\y` - 定义位置坐标. * `width \ height` - 定义宽度、高度 ,为0或小于时不展示元素. #### 色彩 * `fill` - 填充色 * `stroke` - 绘制线条颜色 * `fill-opacity` - 填充透明度 * `stroke-opacity` - 绘制色透明度 #### 边框 * `stroke-width` - 边框宽度 * `stroke-linecap` - 控制边框终点形状 * `butt` - 直边 * `square` - 也是直边, 不同的事由超出实际路径的范围,大小为 stroke-width. * `round` - 圆角形状 ```html ``` ![image-20210727174106055.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aa3ff91c349e4809a0a34d86c66d1c37~tplv-k3u1fbpfcp-watermark.image) * `stroke-linejoin` - 控制两条线段之间 , 使用方式连接. * `miter` - 方形 ,形成尖角 . * `round` - 圆角 * `bevel` - 斜切 . ```html ``` ![image-20210727174724507.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5bb392d38e244c5ebf44bb210aaaac36~tplv-k3u1fbpfcp-watermark.image) * `stroke-dasharray` - 表示虚线边 , 参数为数字序列, 必须用逗号分隔. 如:`4,5,6` 定义三组数字时,以一种循环模式重复创建虚线连接边 . ==填-空-填-空-填-空== ```html ``` ![image-20210727175510759.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/28ab90daec864f2b938c824a326fee1c~tplv-k3u1fbpfcp-watermark.image) * `fill-rule` - 定义如何给图形重叠的区域上色. * `stroke-miterlimit` - 定义什么情况下绘制或不绘制边框连接的miter效果 . * `stroke-dashoffset` - 定义虚线开始的地方 . #### 文本属性在文本中也可以使用`fill` 给文本填充颜色; `stroke` 给文本描边 * `text-anchor` - 定义文本的方向 , 可选值有`start\middle\end\inherit` * `font-weight、font-family、font-style、font-variant、font-stretch、font-size、font-size-adjust、kerning、letter-spacing、word-spacing、text-decoration` ##### tspan 标记文本的部分 , 必须是`text或tspan` 的字元素. * `x\y` - 设置绝对定位坐标, 包含数字序列, 一次应用到每一个字符上. * `dx\dy` - 偏移量,包含数值序列, 每次累积偏移 . * `rotate` - 定义旋转角度 . 可以是一个数列, * `textLength` - 字符串的计算长度 . ```html ``` ![image-20210728194540842.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1719359e65fa4c268eee9ef42b038c02~tplv-k3u1fbpfcp-watermark.image) ##### tref 引用已经定义的文本 . 使用`xlink:href` 属性,指向一个元素 ##### textPath 定义属性`xlink:href` 指向任意路径 , 字体环绕路径 . ```html ``` ![image-20210728200754377.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/87feb78a4ad44853a039ddf13a5cdcd6~tplv-k3u1fbpfcp-watermark.image) ### 渐变、动画定义在`defs` 元素中, 并赋予ID , 通过 `url(#**)` 作为`fill \ stroke`的值的方式引用 , #### 线性渐变、径向渐变 * `linearGradient` - 线性渐变 * `x1\y1\x2\y2` 可以定义渐变的走向 . * `radialGradient` - 径向渐变 * `cx\cy` 定义渐变结束所围绕的圆环 , 设置r半径 * `r` 定义圆环半径. * `fx/fy` 定义渐变的中心 . 通过`stop` 元素 , 设置中断值属性 , * `offset` - 渐变偏移量* `stop-color`- 渐变颜色* `stop-opacity` - 渐变色透明度 ```html ``` ![image-20210727192324052.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/32419c9e77954b3291992b724d178580~tplv-k3u1fbpfcp-watermark.image) 下面的示例则展示了线性渐变、径向渐变的属性设置. ```html ``` ![image-20210727194325319.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d47bb97540a846d9bc62713e6ba87ba8~tplv-k3u1fbpfcp-watermark.image) ##### 其他属性定义 * `spreadMethod` - 描述渐变过程 * `pad` - 默认效果 * `refelct` - 让渐变一直持续下去 . * `repeat` - 重复之前的渐变过程继续渐变 . * `gradientUnits` 渐变单元属性 , 描述渐变的大小和方向 * `uesrSpaceOnUse` - 使用绝对单元, 计算对象的位置. * `objectBoundingBox` - 默认 , 相对定位 ,指定 `0 - 1` 的坐标值 . #### 平移、旋转、斜切、缩放使用`transform` 属性定义 * `translate(x,y)` - 平移 , 向x、y 移动元素. * `rotate(num,x,y)` - 旋转 , 可以定义以`(x,y)` 为原点进行旋转. 默认为当前元素坐标系(左上角) * `skewX()\skewY() ` - 倾斜变换. * `scale(x\y)` - 缩放 . 等比例缩放 ```html ``` ![image-20210729100422977.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2fde35c93bd34c6cb71b4616d5f6c2fe~tplv-k3u1fbpfcp-watermark.image) 文字标识一下每一块的位置 , 的中心点为左上角`(0,0)` . ##### matrix 复杂变形 `matrix(a b c d e f)` 参数为六个值的变换矩阵定义 . ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/caa46c438afa4c78a7f57c66e00d7361~tplv-k3u1fbpfcp-watermark.image) ```html ``` ![image-20210729103843561.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9e62e9620b1549318b9741f071834c02~tplv-k3u1fbpfcp-watermark.image) #### 剪切、遮罩擦除已经创建的元素的部分内容. ##### 剪切 - `clipPath` 移除其他元素的部分内容 . 通常定义在`defs` 元素中, 通过属性`clip-path` 引用. ```html ``` ![image-20210729110857949.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3484a1bdccc94b87bb0770efcd5bf016~tplv-k3u1fbpfcp-watermark.image) 展示被剪切元素覆盖住的部分 . ##### 遮罩 - `mask` 通过属性`mask` 引用 ```html ``` ![image-20210729111904952.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a1e2b21addae4afbbe3a43bc9ed48c9c~tplv-k3u1fbpfcp-watermark.image) #### 滤镜实现阴影效果、模糊渐变 . 通过`filter` 元素定义在`defs` 中, 使用属性`filter` 引用 . 通过字元素定义模糊属性: * `feGaussianBlur` - 定义图像模糊 * `in` 指向前面元素定义的result 属性 , 可选固定属性值有:`SourceGraphic\SourceAlpha\BackgroundImage` 等 . * `stdDeviation` - 定义模糊度 * `result` - 定义临时缓存区, 后需元素可以指向引用. ```html ``` ![image-20210729144017042.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c59a9e66d2974124b05cfb1c7bd0052c~tplv-k3u1fbpfcp-watermark.image) * `feOffset` - 这是模糊偏移量 * `in` - 指向前面元素定义的result 属性 , 自定义属性值同上. * `dx\dy` - 相对偏移量 * `result` - 定义临时缓存区, 后需元素可以指向引用. ```html ``` ![image-20210729144040797.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/094db8c488eb45f48b5bbfe45cbb6126~tplv-k3u1fbpfcp-watermark.image) * `feSpecularLighting` - 设置输入源 ,光照效果 , 通过子元素`fePointLight` 设置偏移量 * `in` 定义 * `surfaceScale` - * `specularConstant` - * `specularExponent` - * `lighting-color` - * `result` - 定义临时缓存区, 后需元素可以指向引用. ```html ``` ![image-20210729145046042.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1c99212bfcdf478b8ba9337db67012b0~tplv-k3u1fbpfcp-watermark.image) * `feComposite` - 效果合成 * `in\in2` - 指向输入源 * `operator` - 定义合成模式 * `k1\k2\k3\k4` * `result` - 定义临时缓存区, 后需元素可以指向引用. ```html ``` ![image-20210729145619794.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dd33301275b34560968a8c2bc688c60c~tplv-k3u1fbpfcp-watermark.image) * `feMerge` - 合并各个效果 , 通过子元素 `feMergeNode` ```html ``` ![image-20210729164047392.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8e4b03363631450993fe213b33377f7e~tplv-k3u1fbpfcp-watermark.image) ### 绘制一个心形状 ```html ``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/27375414cf0f4daeada8cfefd103bc37~tplv-k3u1fbpfcp-watermark.image) 可太难了, 画了好半天 :sob: