玩转Svg——给坤坤变个颜色

开头

今天看到别人用canvas给坤坤变了个颜色，

玩转Canvas——给坤坤变个颜色

按照循环取相近颜色的逻辑。如果坤坤颜色本身是渐变色。那么就无法准确选取了。于是我就想到了通过echarts操作svg来个坤坤变个颜色。

一.使用svg-edit将png变成svg

先准备一个ikun的图片。素材的话。点这里。

打开svg-edit在线网站。点这里

使用impot SVG将png导入。

点击svg画布。将x.y值改成0。将w.h改成图片宽和高。

点击document将画布的大小改成图片的大小。也就是402*402

之后选取Path Tool开始svg轮廓的绘制。这里选择的是画出ikun头发的轮廓。

绘制完成。

点击顶部的svg。保存下来svg代码。

也可以选择save svg将svg文件保留到本地。

二、使用echarts操作svg

使用echarts 庖丁解牛。打开上面的地址。

将上面的svg替换成我们自己的svg.

通过下载本地的svg在浏览器里面打开。找到我们画的头部path部分。

将头部的path加上name=1;然后在data里面写一个name=1;然后就可以操作ikun头部的颜色了。还可以利用echarts的各种特性。

这样就可以改变ikun头发的任何颜色。也可以通过path的绘制改变ikun各个部位的颜色。已经选中事件。