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中

AntV X6是一个基于JavaScript的数据可视化库,它允许你在Node.js环境创建和操作图形。如果你想在X6使用本地SVG文件,你可以按照以下步骤操作: 1. 首先,你需要在项目引入X6的基本依赖。如果你还没有安装,可以使用npm或yarn安装: ```bash npm install @antv/x6 @antv/x6-canvas@latest # 或者 yarn add @antv/x6 @antv/x6-canvas@latest ``` 2. 加载SVG文件并转换为X6的图形数据。你可以使用`fs`模块读取文件内容,然后解析SVG。有一个名为`xml2js`的第三方库可以帮助你将SVG字符串解析成JSON对象: ```javascript const fs = require('fs'); const xml2js = require('xml2js'); async function loadSVGFromLocalFile(svgFilePath) { const svgContent = await new Promise((resolve) => fs.readFile(svgFilePath, 'utf8', resolve)); const parser = new xml2js.Parser(); parser.parseString(svgContent, (err, result) => { if (err) throw err; // 结果是一个对象,通常包含<svg>标签内的元素和属性 const x6Data = convertSVGToX6Data(result.svg); // 然后你可以使用x6Data创建一个新的图节点 }); } function convertSVGToX6Data(svgObj) { // 这里需要你自己编写函数,根据SVG的内容构建X6的节点结构 } ``` 3. 创建X6节点并添加到图: ```javascript loadSVGFromLocalFile('path/to/your/svg/file.svg') .then((x6Data) => { const graph = new x6.Graph({ container: 'containerId', // 渲染容器ID width: 800, height: 600, }); // 将SVG数据转换后的节点和边添加到图 graph.import(x6Data); }) .catch((error) => console.error(error)); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

跃渊笺亓

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

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

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

打赏作者

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

抵扣说明:

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

余额充值