前段时间发现子比官网的这个Logo是动态的，“B”的上下两个形状分别展示，然后“ZIBLL”带有笔画地呈现出来。接下来教各位朋友如何复刻一个这样的Logo。我把这个Logo扒下来发现是SVG的，SVG相较于GIF有两个好处，一是远比GIF小，子比官网这个Logo不到10KB，而相同清晰度与流畅度的GIF绝对无法做到这么小；二是无损，SVG本身就是矢量图，无论放多大都不会出现一点锯齿。不过想要做这个要花费不少心思（或者说其实很简单但是我没找到更简单的方法），没耐心的朋友不用试了（不如PPT录屏转GIF）。找站长50块钱代做也可以。

成品演示：

海枫筑梦计划Logo.svg

下载

svg文件

10.7K

教程开始

需要自备一张SVG矢量Logo和Ai（adobe画矢量图那个），以及一个代码编辑器VS Code（其他的也行，推荐在里面装个SVG插件）

我们先来分析一下其中的代码结构：

第一行是xml头文件，不需要管它；

第二行以下是svg内容，后面跟随的viewBox里面有几个参数，其中viewBox="0 0 295.52155 92.399581" 代表整个SVG的可见内容范围，xmlns和xmlns:svg不用管，width="300" height="92.3996"分别代表整个图片的宽度和高度。

第三行开始就是<style>这段css以及<g>的主图像文件。我们先看<g>中zibll-icon这个class：<path class="zibll-icon" d="......" />其中class代表每一个元素的名字，d代表这个元素的描点坐标。不考虑改名字的话我们需要改动的就是d中的内容。将你自备的SVG打开，里面内容大致也有类似的内容，它们都以m/M开头，以z/Z结尾。我们先删掉d中的值（不要删掉了d=""），你会发现图片只剩下了下面那部分：

然后打开你自己的SVG文件，它大概长这个样子：

如果有g=””你就复制g的值，没有的话应该就是point，复制point就行。把复制好的内容粘贴到zibll-icon的g那里，可以看到子比的图案Logo被替换成了你自己的Logo：

如果你图案logo中没有更多的元素可以把zibll-icon p-2直接删了，上面的css那里也要删掉：

或者说你logo中有更多的元素，那就加class，css那里复制粘贴改个名字就OK。

接下来是右侧标题的绘制。这一步才是真正的煎熬，如果你不希望这么麻烦，在css那里直接复制zibll-url的效果就可以，否则请根据想象绘制坐标：

坐标绘制的话，可以想象一下平面直角坐标系（学过CNC数控车床加工的朋友很容易上手这个），但请注意定位原点不在画板原点处。具体内容可以参考页面顶部的演示。其中字母内容示意如下：

1. **m (moveto)**: 移动到指定的坐标位置。相对位置移动。
2. **M (Moveto)**: 移动到指定的坐标位置。绝对位置移动。
3. **l (lineto)**: 从当前位置绘制一条直线到指定的相对坐标。
4. **L (Lineto)**: 从当前位置绘制一条直线到指定的绝对坐标。
5. **c (curveto)**: 绘制三次贝塞尔曲线，使用相对坐标。
6. **C (Curveto)**: 绘制三次贝塞尔曲线，使用绝对坐标。
7. **H (horizontal lineto)**: 从当前位置绘制一条水平线到指定的 x 坐标。
8. **V (vertical lineto)**: 从当前位置绘制一条垂直线到指定的 y 坐标。
9. **z 或 Z (closepath)**: 关闭路径，绘制一条从当前点到起始点的直线。

1. **rx**：椭圆弧的 x 轴半径。
2. **ry**：椭圆弧的 y 轴半径。
3. **x-axis-rotation**：椭圆弧相对于 x 轴的旋转角度（度）。
4. **large-arc-flag**：大弧标志，取值为 `0` 或 `1`，决定是否绘制大于或小于 180 度的弧：
   - `0` 表示小弧。
   - `1` 表示大弧。
5. **sweep-flag**：弧线方向标志，取值为 `0` 或 `1`，决定弧线是顺时针还是逆时针绘制：
   - `0` 表示逆时针。
   - `1` 表示顺时针。
6. **dx,dy**（或 x,y）：相对（或绝对）终点坐标。

比如说我想要画一个我Logo标题想要写个单字符长宽均为100的HEYFUN，那么首先就要把每个笔画的坐标想好。这里以“H”举例：

然后就是参考笔画，首先我们需要将画笔移动到原点，就要用命令M（绝对位置移动），移动到0,0的话代码就是“M 0,0”

然后H的第一笔是向下移动，我们需要用到命令v画一条垂直方向的线。图中需要从0,0画到0,-100的话代码就是”v 100″

然后需要移动到0,-50，代码是“M 0,-50”。

然后H的第二笔是向右移动，我们需要用到命令h画一条水平方向的线。图中需要从0,-50画到100,-50的话代码就是”h 100″

经过上述代码不难得出总代码为“M 0,0 v 100 M 0,-50 h 100 M 100,0 h 100 z”（结尾最好加个z，用于闭合）

把代码填到zibll-z-1就可以完成修改：

其余字母不赘述。

接下来是url部分，打开Ai然后新建一个网页画布（1366×768），然后新建文字，里面写上你的链接：

如果是上面的那个主标题，推荐字体大小144px，副标题推荐120px，双行副标题推荐72px。

然后点击左上角-导出-导出为，选择svg，然后弹出的参数窗口如下配置，不需要保存：

小数千万不要改成0，否则打开的svg会是一片空白。

不要点确定，然后点击“显示代码”，将新窗口的内容复制下来，egde搜索xml格式化：

点击xml，然后将内容粘贴进去，点击格式，再复制，vscode新建一个标签页，粘贴下来：

麻烦的部分来了：你需要把所有d的值拼合在一起，也就是说只留下一个path class。

具体操作如下：把第一个d的值的末尾的z去掉，然后加一个空格，将第二个d的值剪切到第一个d值的末尾，然后删掉z，再复制第三个d的值，剪切插入，再删掉，依此类推，添加完最后一个值后，记得补一个Z上去，否则在某些浏览器中会显示错误。删掉多余的path class，如下：

后续我会做一个脚本，一键将这个xml中的d值拼合。

然后复制d的值，将zibll-url替换掉就OK。

关于位置偏移问题：

如果出现位置偏移问题，比如图中的标题出现在了错误的位置，太过于偏下了：

这种情况可以用transform=”translate(x y)”来解决。加在class名后面就OK：

.zibll-icon {
         fill: #1fbc45;
         stroke: #1fbc45;
         fill-opacity:0;
         stroke-width: 5px;
         stroke-dasharray: var(--s-dd);
         stroke-dashoffset: var(--s-dd);
         animation: logo-animation 1.3s ease-in-out forwards;
         animation-delay: var(--a-d);
         --s-dd: 1150;
         --s-ddo:-1150;
      }

.zibll-icon.p-2 {
         --a-d: .6s;
         --s-dd: 1050;
         --s-ddo:-1050;
      }

@keyframes logo-animation {
         60%{
            fill-opacity:0;
            stroke-dashoffset:0;
         }
         to{
            fill-opacity:1;
            stroke-dashoffset:0;
         }
       }

.zibll-stroke{fill:none;stroke:#f5f5f5;stroke-width:30;stroke-dasharray:none;stroke-opacity:1}.zibll-stroke path{stroke-dasharray:var(--s-dd);stroke-dashoffset:var(--s-dd);animation:stroke-animation .3s ease-in-out forwards;animation-delay:var(--a-d)}.zibll-z-1{--s-dd:300}.zibll-z-2{--s-dd:300;--a-d:.25s}.zibll-i{--s-dd:180;--a-d:.4s;animation-duration:.17s !important}.zibll-b{--s-dd:880;--a-d:.45s;animation-duration:.8s !important}.zibll-l-1{--s-dd:350;--a-d:1s;animation-duration:.4s !important}.zibll-l-2{--s-dd:350;animation-duration:.5s !important;--a-d:1.45s}@keyframes stroke-animation{to{stroke-dashoffset:0}}.zibll-url{fill:#f5f5f5;opacity:0;animation:url-animation .5s ease-in-out forwards;animation-delay:1.6s;fill-opacity:.8}@keyframes url-animation{to{opacity:.8}}.zibll-icon{fill:#1fbc45;stroke:#1fbc45;fill-opacity:0;stroke-width:5px;stroke-dasharray:var(--s-dd);stroke-dashoffset:var(--s-dd);animation:logo-animation 1.3s ease-in-out forwards;animation-delay:var(--a-d);--s-dd:1150;--s-ddo:-1150}.zibll-icon.p-2{--a-d:.6s;--s-dd:1050;--s-ddo:-1050}@keyframes logo-animation{60%{fill-opacity:0;stroke-dashoffset:0}to{fill-opacity:1;stroke-dashoffset:0}}