前言
完成手头工作后在沸点刷到的一个挺有意思的贴，如图所示：
大多数jym给出的方案都是SVG、Canvas，自己没用过svg所以不了解，便去MDN(引言 - SVG：可缩放矢量图形 | MDN (mozilla.org))那边学习了一下，并自己尝试写看是否能写出来。
结果展示和代码部分
提供了一个自己感觉比较笨的写法吧。
先给出结果图和完整代码部分,有错的话也请大家帮忙纠错一下，有别的写法思路什么的也可以在评论区评论一下。（感谢jy摸鱼小虾米的解答）
思路部分
简单来说就是找到关键点的规律就好了，没有转折的时候其实就纵坐标在变化。
1.纵坐标加上格子的宽度和线的长度。
2.转折之后方向变了，就是减掉格子宽度和长度。
3.横坐标的变化在转折后的第一个格子上，横坐标加上格子长度和线的长度，纵坐标不变。
4.线的坐标也是通过设置存储xy的变量进行计算后赋值就可以了，主要还是一些点的坐标问题吧个人觉得。
