AntV X6中path使用svg

AntV X6中path使用svg

前言

使用AntV X6开发一个箭头,icon是多样的,so...如果我们能使用iconfont图表库!阅读本文不需要任何svg基础知识

本文就是介绍如何从iconfont中获取svg的path,用于Ant X6的d样式.

当然使用svg的path缺点就是我们没办法修改path的方向.iconfont图片是什么方向,echarts中展示的就是什么方向.如果想要修改svg的方向,可以参考方法二:将图片通过在线编辑将png格式转化为base64,用于AntV X6的d.

这里只介绍第一个方法,第二个方法请参考(AntV X6 与echarts通用):

 echarts使用iconfont中的图片_base64(方法二) - 偶滴小祖宗 - 博客园

开发

步骤一:首先在iconfont中找到我们需要的图片,如下:选择复制或者下载svg都可以.

步骤二:在文件中粘贴svg,接着我们需要对svg进行处理(关键关键关键!!!):

　　获取所有的path d路径,一个svg中通常会有好几个path d,将所有的path d内容粘贴出来,拼合成如下内容结构.这有几个关键点,一般从iconfont复制的svg中,存在好几个path d,每个path d都是以“M”开头,提取出来后每段M之间用空格分割;M内也就是path d中的其他内容在iconfont中是空格,我们要转化为逗号

　　修正后的的路径就如下,我们将这段代码复制到Antv X6的d中

const token = ate('path', {d:"M776.270961 612.600878l-324.641483 399.604881c-6.097023 7.49634-15.192582 11.794241-24.787897 11.794241H219.44285c-6.69673 0-10.494876-7.796193-6.196974-13.093607l373.317716-458.875939c19.090678-23.488531 19.090678-57.172084 0-80.760566L214.145437 12.993655c-4.297901-5.197462-0.499756-12.993655 6.196974-12.993655h206.799024c9.595315 0 18.790825 4.297901 24.787896 11.794241l324.34163 399.105125c47.776672 58.771303 47.776672 142.93021 0 201.701512z",fill: '#3DFA67',
})

 步骤三:完成!

在图表中我们可以看到对应的图形了

but复制出来的d坐标不带有宽高，所有初始情况下会很大，这里我用的是scale控制大小

可用下方链接进入编辑d坐标，调整大小。

SvgPathEditor/

总结

大致分为:从iconfont中获取svg,处理svg的path d为AntV X6识别的格式,放到AntV X6的d中