超详细SVG实战——徒手画pipeline，带你玩转SVG

记录个 svg 实战应用～最近断断续续在搞公司的前端发布平台，本想搞 pipeline ，结果先给 svg 给拦下了。基于发布平台没有同时多项目发布的能力，so～笔者决定搞个 pipeline 把 jenkins 的 freeStyle job 给串起来，实现并、串行前端发布的能力。本着身为前端开发的角色，界面肯定是不能少的，于是就有了以下的故事…

笔者也不卖关子了，直接上图！如图，这就是流水线板块的成品样子了。哈哈哈，丑是丑了点，凑合看吧～本文将以笔者自己的业务场景为案例，记录一下如何使用 svg实现直、曲线段，箭头，圆圈来实现这种流水线效果～

• 

熟悉 DevOps 的同学这种界面一定不会陌生，笔者也是照猫画虎搞了个。其实就是把每一个 card 通过各种线段连接起来了，前端看起来会协调一点。这里笔者把 线段部分 给干掉，这样上下一对比，果然还是差了点呀～

• 

回到主题 svg ，笔者做前端这么久了也只知道有 svg 的存在，实际并没有在实战中自己玩过，最最最接近实战 svg 的时刻，应该就是导出个 svg图标 应用在项目里了～趁着这次搞 pipeline 的机会，直接搞搞 svg ，来个顺手牵羊，美哉美哉～

从笔者的学习到应用来说，使用 svg 做图标、画线并不困难，可能更多时候你不是在搞svg，而是在计算各种点位，就是数学计算而已！本文不是文档，不会直接丢出一大堆api，防止出现看了跟没看一样的效果。本文就用笔者的实现，带着大家过一遍实战。所以大家不用抗拒，花个10来20分钟了解下实战应用，一定对 svg 有自己的理解。接下来，马上进入正题！

一、svg 基本使用

首先看看 MDN 对 svg 的定义：一种基于 XML 的标记语言，用于描述基于二维的矢量图形。其放大、缩小都不会失真，还算是很不错的。只要掌握了 svg 的使用方法，我们可以轻松的用它来实现一些小图标，小logo，还是非常方便的。

首先看一下本文所需要用到的 svg 相关标签元素：

• <svg> 用于包裹着整个矢量图。像 <line>：直线、<circle>：圆、<rect>：矩形等各种svg图形都是被包裹在 <svg> 标签内的。* <path> 定义路径。这是本文的重点！可以理解为：指定坐标点，指定他们的连接方式。以此，我们就能构建出任何图形，比如一些曲线，各种折线、曲直线结合。* <circle> 圆形元素。这个我们仅记一点即可：圆心(cx, cy) + 半径®～* <marker> 标记。我们可以用它，在 <path> 的起点、终点添加一些图形。比如案例中的小圆圈，小箭头，都是用这个标签实现的。它需要包裹在 <defs> 元素中。* <defs> 用于实现svg的复用，其内容不使用时是不可见的。将需要复用的图形用该标签包裹，通过 <use> 标签来使用即可。这个跟下面结合 <g> 标签一起举个例子就明了了。* <g> 其实就是 group 的意思，也就是一个集合。我们可以把图形组合用 <g> 进行包裹，做一个装箱的包装。以下，直接通过制作一个 “+” 的图标来加深对 <defs> 、 <g> 标签的理解：

<svg><!-- 代码可以不用细看，知道就是一个十字架的坐标就ok了（可以copy到本地自己试试）～ --><line x1="0" y1="10" x2="20" y2="10" style="stroke: #000; stroke-width: 2px;" /><