AntV X6中path使用svg_从iconfont中获取svg_svg为path d格式

本文介绍了如何从iconfont获取SVG的path数据,并转换为AntVX6可识别的d样式,用于绘制图形。虽然SVG的path方向无法直接修改,但提供了通过Base64转换来解决方向问题的方案。文章详细阐述了从获取SVG到处理path,最终在AntVX6中应用的步骤。
摘要由CSDN通过智能技术生成

前言

使用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 = Vector.create('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坐标,调整大小。

SvgPathEditoricon-default.png?t=MBR7https://yqnn.github.io/svg-path-editor/

总结

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

跃渊笺亓

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值