节点类型是path,之前是特定的形状
1 .https://www.svgrepo.com/svg/13653/like svg图标网址
2 .关键 shape:path,path:"svg曲线"
Document
基本图形和属性
多边形
graph.addNode({
shape: 'polygon',
x: 40,
y: 40,
width: 80,
height: 80,
label: 'polygon',
attrs: {
body: {
fill: '#efdbff',
stroke: '#9254de',
// 指定 refPoints 属性，多边形顶点随图形大小自动缩放
// https://x6.antv.vision/zh/docs/api/registry/attr#refpointsresetoffset
refPoints: '0,10 20,0 20,10 10,20',
},
},
})
graph.addNode({
shape: 'polygon',
x: 40,
y: 40,
width: 80,
height: 80,
label: 'polygon',
points:'0,10 20,0 20,10 10,20',
attrs: {
body: {
fill: '#efdbff',
stroke: '#9254de',
},
},
})
graph.addNode({
shape: 'polygon',
x: 40,
y: 40,
width: 80,
height: 80,
label: 'polygon',
points: [
[0, 10],
[10, 0],
[20, 10],
[10, 20],
],
attrs: {
body: {
fill: '#efdbff',
stroke: '#9254de',
},
},
})
//注:需要最新版本才能
graph.addNode({
shape: 'polygon',
x: 40,
y: 40,
width: 80,
height: 80,
label: 'polygon',
points: [
[0, 10],
[10, 0],
[20, 10],
[10, 20],
],
attrs: {
body: {
fill: '#efdbff',
stroke: '#9254de',
},
},
})
graph.addNode({
shape:"polygon",
x:140,
y:180,
width:80,
height:80,
attrs:{
body:{
refPoints:'0,100 50,25 50,75 100,0',
fill:'#73d13d',
stroke:'#237804'
}
}
})
graph.addNode({
shape:'polygon',
x:240,
y:180,
width:80,
height:80,
points: '100,10 40,198 190,78 10,78 160,198',
attrs:{
body:{
fill:"#ffd591",
stroke:'#ffa940',
fillRule:'evenodd'
//这个属性,矩形空间中心掏空,必须是有空间的
}
}
})