在开发过程中，我们免不了会使用图片等素材来引导用户操作，或优化我们产品的体验。我们常用的图片格式有 *SVG/PNG/JPG/JPEG/WebP* 等，但由于资源加载、图片大小、缩放是否失真以及使用便捷性， *SVG* 已经成为了当下前端开发的宠儿🍼 “沉舟侧畔千帆过，病树前头万木春”，前端发展到现在，*IconFont* 似乎成为了一个当下还算不错的解决方案，我们可以像操作字体一样使用 `color/font-size` 等样式来控制我们想要的 *icon* 颜色及大小，同时缩放不会失真的矢量图特性以及较小的文件大小也为其锦上添fā🌻 但我们平时的 *SVG* 素材都是 *UX* 给我们导出，或者直接从各种 *UI* 库中导入的，这当然能满足我们大部分的需求，要知道 *Zeplin/Figma* 这些工具导出的 *icon* 实现都是固定的，比如我们要一个矩形 *icon*，实现方式可能有很多种，但这些工具导出的内容有且只有一种，这就难免会遇到一些尴尬的场景。 ## 不得不手撸🤷‍♀️ 在我们小程序的个人中心页面中有一个发票的 *icon*，在开发者工具上正常显示的它，在真机上却“伤心地模糊”了，并且只在 *iOS* 上才会模糊（就NM离谱），如下： ![模糊.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cbbec8f455df44b99b2908ef7628061e~tplv-k3u1fbpfcp-watermark.image) 因为截图原因，所以第一个订单 *icon* 显得有些模糊，但相比之下大家应该可以发现第二个发票 *icon* 中间的两个横杠模糊地更加明显！原本以为是切图原因的我又反复切了好次，发现并没什么卵用，于是乎～不得不看一眼 *SVG* 实现，然后发现了一个神奇的东西 ``🧙‍♀️自己没有深究其原理，猜测可能是因为小程序对 *SVG* 的 `mask element` 支持不太好，所以才导致这个问题，当把 `mask` 删掉之后，我终于“看清了它的脸”！虽然“脸”看清了，可 *icon* 的样式都变了，但从 *Figma* 上导出的 *icon* 就是这样，所以我只能选择手撸了！ ![尴尬.jpeg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/afb554edadf5492386d972f6848a470e~tplv-k3u1fbpfcp-watermark.image) ## 撸前热身🏃‍♂️ 这个小小的 *icon* 主要由一个圆角矩形，两个半圆和两条横杠组成（原谅我如此苍白的描述，因为我确实描绘不出它的美）🌚 在 *SVG* 中，我们经常看到一个元素 ``，这个元素理解起来很简单：*`g` 下的所有子元素都会继承 `g` 上的属性*。比如我们绘制两个圆： ```html ``` 效果如下： ![svg-g.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2edca7ffaea642d6b6b2d029b05b1bc3~tplv-k3u1fbpfcp-watermark.image) 两个圆形都继承了 `g` 的 `fill/stroke/stroke-width` 属性（灰色边框是手动给 `img` 元素添加的），是不是很简单😄 -------- 除了 ``，我们还常见一个元素就是 ``，`path` 中有个属性叫做 `d`（*draw* 的缩写），`d` 中的内容看了更是头大！不要慌，让我来带你梳理一下🧶 `path` 元素很好理解，就是绘制我们定义的制定路径的图形（这个路径可以类比 *PhotoShop* 中的路径）；而 `d` 就是绘制路径的指令，`d` 属性中经常看到 `m/l/h/M/L/H` 等各种字母并且大小写还不相同，首先你需要知道的是 ***每个字母都是一个指令，其后跟的就是要绘制的位置，小写的字母都是相对位置（relative），大写的字母都是绝对位置（absolute）***。下面我们通过一个例子来理解： ```html ``` ![svg-path-a.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f013c2c45c2642b4b1c0ab124950adc0~tplv-k3u1fbpfcp-watermark.image) ```html ``` ![svg-path-r.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d69f0141bb9f4a91915a6575b8a02da4~tplv-k3u1fbpfcp-watermark.image) 上面我分别使用 *相对指令* 和 *绝对指令* 绘制了两个一样的图形，绝对指令我们可以理解为 ***“移动到”***，相对指令则可以理解为 ***向哪儿移动多少***。那么用这种理解我们来映射到上面的两个例子中： 🌰1⃣️：画笔移动到 $(1, 1)$，绘制一条从 $(1, 1)$ 到 $(10, 10)$ 的线段，绘制一条从 $(10, 10)$ 到 $(10, 1)$ 的线段，绘制一条从 $(10, 1)$ 到 $(6, 1)$ 的线段； 🌰2⃣️：画笔移动到 $(1, 1)$，绘制一条从 $(1, 1)$ 沿 $x$ 和 $y$ 方向各增加 $9$ 的线段（即 $(1 + 9, 1 + 9)$），沿 $y$ 轴负方向移动 $9$ 并绘制相应线段（即 $(10, 10 - 9)$），沿 $x$ 轴负方向移动 $4$ 并绘制相应线段（即 $(10 - 4, 1)$）。怎么样，这样一看是不是很简单？下面简单介绍一下 `d` 的常用指令： | 指令 | 参数 | 含义（$P_x$，$P_y$ 分别代表当前画笔位置） | | ---- | ---------- | ------------------------------------------------------------ | | *m* | $d_x, d_y$ | 根据当前画笔位置沿 $x$ 轴移动 $x$ 个单位，沿 $y$ 轴移动 $y$ 个单位，$(P_x, P_y)=(P_x + d_x, P_y + d_y)$ | | *M* | $x, y$ | 将画笔移动到 $(x, y)$ | | *l* | $d_x, d_y$ | 绘制一条从 $(P_x, P_y)$ 到 $(P_x + d_x, P_y + d_y)$ 的线段 | | *L* | $x, y$ | 绘制一条从 $(P_x, P_y)$ 到 $(x, y)$ 的线段 | | *h* | $d_x$ | 绘制一条从 $(P_x, P_y)$ 到 $(P_x + d_x, P_y)$ 的线段 | | *H* | $x$ | 绘制一条从 $(P_x, P_y)$ 到 $(x, P_y)$ 的线段 | | *v* | $d_y$ | 绘制一条从 $(P_x, P_y)$ 到 $(P_x, P_y + d_y)$ 的线段 | | *V* | $y$ | 绘制一条从 $(P_x, P_y)$ 到 $(P_x, y)$ 的线段 | 当然，`d` 中还有其它指令比如绘制 *贝塞尔曲线* 等，更多请了解：https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d🔜 ## 不撸了，直接结束💪 说了上面的内容，再来绘制发票 *icon* 就迎刃而解了，就讲怎么了直接贴代码： ```html ``` 看下效果如何： ![invoice.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a190d5c07e59464bb7a55a574ba3bace~tplv-k3u1fbpfcp-watermark.image) 删去了 `mask` 在小程序中也能正常显示了： ![清晰.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e4343abb011247a99ba0d2b2e3383388~tplv-k3u1fbpfcp-watermark.image) 细心的读者可能发现上面多了一个 `viewBox` 属性，该属性允许指定一个给定的一组图形伸展以适应特定的容器元素，也就是当我们设置 *icon* 大小时，`svg` 也会跟随我们设置的尺寸相应伸缩不会被裁减。各位可以试一下删去这个属性，然后使用 *CSS* 将 *icon* 的尺寸缩小，该 *icon* 会被裁掉。到现在，我们的 *icon* 就已经画好了，但还没结束～我们想使用 *CSS* 的 `color` 来设置 *icon* 的颜色，这个问题很简单，*CSS* 中有个 `currentColor` 我们把 *SVG* 的 `stroke` 值设为 `currentColor` 然后在父元素设置 `color` 即可；而使用 `font-size` 来控制 `icon` 大小也只需要将 `svg` 的 `width` 和 `height` 的值设为 `1em` 即可： ```css .container { color: red; font-size: 48px; } ``` ```html

``` 看下效果： ![colored.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e5891e8b50134208bf08e1bb85dee5b3~tplv-k3u1fbpfcp-watermark.image) 不过如此，索然无味！ ![不过如此.jpeg](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ee6462902645419c93e514121d00dba8~tplv-k3u1fbpfcp-watermark.image) **---- 到此结束，这次还是不闲扯，我要做一个沉稳的 *Boy* ----**