有边框的线条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/@antv/x6@1.1.1/dist/x6.js"></script>
<!-- 有边框的线条 -->
</head>
<body>
<h3>基本图形和属性</h3>
<div id="container">
</div>
<script>
const graph=new X6.Graph({
container:document.getElementById('container'),
width:800,
height:600,
grid:true,
})
graph.addEdge({
shape:'double-edge',
//双边线也是同样的操作,并不是真的给一个线条加了边框,而是下面有一条
//svg没有边框属性么???
source: { x: 240, y: 40 },
target: { x: 280, y: 180 },
vertices:[
{
x: 240, y: 140
}
],
attrs:{
line:{
stroke:"#52c41a",
strokeWidth:10,
},
outline:{
stroke:"#237804",
strokeWidth:12
}
}
})
</script>
</body>
</html>
线条有过渡颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/@antv/x6@1.1.1/dist/x6.js"></script>
<!-- 有边框的线条 -->
</head>
<body>
<h3>基本图形和属性</h3>
<div id="container">
</div>
<script>
const graph=new X6.Graph({
container:document.getElementById('container'),
width:800,
height:600,
grid:true,
})
graph.addEdge({
shape:'double-edge',
//双边线也是同样的操作,并不是真的给一个线条加了边框,而是下面有一条
//svg没有边框属性么???
source: { x: 240, y: 40 },
target: { x: 280, y: 180 },
vertices:[
{
x: 240, y: 140
}
],
attrs:{
line:{
stroke:"#52c41a",
strokeWidth:10,
},
outline:{
stroke:"#237804",
strokeWidth:12
}
}
})
</script>
</body>
</html>
多种颜色填充线条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <script src="https://unpkg.com/@antv/x6@1.1.1/dist/x6.js"></script> -->
<!-- 实在调试不出来,那就换最新的版本试试 -->
<script src="https://unpkg.com/@antv/x6/dist/x6.js"></script>
<!-- 线条过渡样式 -->
<!-- 这个实现也有点拉,就是多加几条线,然后每个都展示一点点,那就是说,有多少种颜色,就要加多少线条 -->
</head>
<body>
<h3>基本图形和属性</h3>
<div id="container">
</div>
<script>
const graph=new X6.Graph({
container:document.getElementById('container'),
width:800,
height:600,
grid:true,
})
graph.addEdge({
//双边线也是同样的操作,并不是真的给一个线条加了边框,而是下面有一条
//svg没有边框属性么???
source: { x: 240, y: 40 },
target: { x: 280, y: 180 },
vertices:[
{
x: 240, y: 140
}
],
//开始新建线条,用上面的数据
markup:[
{
tagName:'path',
selector:'wrap',
groupSelector:'lines',
},{
tagName:'path',
selector:'line1',
groupSelector:'lines'
},{
tagName:'path',
selector:'line2',
groupSelector:'lines'
}
],
attrs:{
lines:{
strokeDasharray:'10,20',
//strokeDashArray:这里为啥是小写了.我操
fill:"none",
connection:true,
strokeLinejoin:'round'
},
//总的全部线条的属性.
line1: {
stroke: '#fe854f',
strokeWidth: 10,
},
line2:{
stroke:'#eee',
strokeWidth:10,
strokeDashoffset:10,
}
}
})
</script>
</body>
</html>
网友评论