自从看完攻壳的第一季后就想自己做个会动的笑脸男的矢量图图标了，最近花了点时间终于搞定了。
下面我会谈谈网页上矢量图该怎么写。
预览 （在ie和edge上文字无法滚动，在chrome上是正常的，其他浏览器不清楚）。 源代码 。

制作矢量图的工具

虽然在网页上是用代码实现的，但是设计还是需要一个能画矢量图的工具的。
可以用Illustrator(Ai)或者一个在线的工具就可以了。我这里直接用了别人用ai设计的矢量图，所以对详情设计也不太了解。

用代码画矢量图

笑脸男的图像里基本上都是使用路径画好的，所以只要使用画路径的方法就行了。关于路径，w3有一套 规范 ，只要能看懂这里的写法就好，这是所有库都通用的标准写法。
其中可能让人困惑的一点就是arc画法了（其实规范里的图已经说明的挺好了）。它是提供当前点（起始点）、x、y上的半径、旋转角度、large-arc-flag、sweep-flag和终点来确定一个弧的。其中large-arc-flag指是否画大一点的弧，sweep-flag指从起点到终点是否为顺时针画线。

对路径熟悉后就可以把你设计图给搬进代码里了，如果你的编辑器能直接生成w3标准的代码的话就再好不过了。

转动的文字

文字的部分其实有点麻烦，麻烦在做动画上。

    var t1 = paper.text(s);
    t1.fill('#23498C').font({size: 50, 'letter-spacing': 2.3, weight: 700})
    t1.path('M 605,365 A 300,300 0 1,1 605,260')
先将路径确定好，并调整文字的一些属性，使其和原图一样。
    t1.textPath().attr('startOffset', '0').animate({ ease: '-', duration: 10000}).attr('startOffset', '100%').loop()
然后调用动画方法就能动了。但是这样无法将文字循环，文字播放到终点就消失了。
一开始我想再用一个文字矢量图接着这个画的，但是svg里的startOffset不能使用负值（负值当然也是有效的，但是不能像0~100%这样设置）。于是想用逆时针路径然后倒过来播放，可惜这样文字就倒过来了，也不知道是否有办法设置。
最后终于想到一个完美的方案
    t1.path('M 605,365 A 300,300 0 1,1 605,260 M 605,365 A 300,300 0 1,1 605,260')
    t1.textPath().attr('startOffset', '0').animate({ ease: '-', duration: 10000}).attr('startOffset', '50%').loop()
把路径画两遍，然后播放时startOffset从0~50%进行循环就行了。
如果你也想实现这种无限循环地旋转的话，可以试试这个方法。
其他
之所以做这个还是由于对笑脸男这个人物的喜爱吧，有能力的同时愿意来为真相做出贡献。有意思的是，攻壳第二季第二集的主人公和他完全就是相反的人。空想但没有勇气去做，想想自己和大概也就是这样的人了。