You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
84 lines
1.8 KiB
84 lines
1.8 KiB
4 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en" dir="ltr">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title></title>
|
||
|
|
<style media="screen">
|
||
|
|
|
||
|
|
svg{ width:100%; height:100%; }
|
||
|
|
path{
|
||
|
|
fill: transparent;
|
||
|
|
stroke: #000;
|
||
|
|
stroke-dasharray:6px;
|
||
|
|
}
|
||
|
|
|
||
|
|
div{
|
||
|
|
position:absolute;
|
||
|
|
top:20px;
|
||
|
|
left:0;
|
||
|
|
right:0;
|
||
|
|
margin:auto;
|
||
|
|
height:500px;
|
||
|
|
width:700px;
|
||
|
|
}
|
||
|
|
|
||
|
|
p{ position:absolute; padding:30px; top:200px; width:0; height:0; border-radius:50%; }
|
||
|
|
.c1{ padding:20px; top:220px; left:10%; background:red; }
|
||
|
|
.c2{ left:50%; background:blue; }
|
||
|
|
.c3{ left:30%; background: yellow;}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div>
|
||
|
|
<svg>
|
||
|
|
<path class='p1'></path>
|
||
|
|
<path class='p2'></path>
|
||
|
|
|
||
|
|
</svg>
|
||
|
|
<p class='c1'>bha</b>
|
||
|
|
<p class='c2'>etc</b>
|
||
|
|
<p class='c3'>hello</p>
|
||
|
|
</div>
|
||
|
|
<script
|
||
|
|
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
|
||
|
|
integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
|
||
|
|
crossorigin="anonymous"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
var path1 = document.querySelector(".p1"),
|
||
|
|
path2 = document.querySelector(".p2");
|
||
|
|
|
||
|
|
var c1 = document.querySelector(".c1"),
|
||
|
|
c1Pos = getPointPos(c1),
|
||
|
|
c2 = document.querySelector(".c2"),
|
||
|
|
c2Pos = getPointPos(c2),
|
||
|
|
c3 = document.querySelector(".c3"),
|
||
|
|
c3Pos = getPointPos(c3);
|
||
|
|
|
||
|
|
|
||
|
|
function getPointPos(point){
|
||
|
|
var pos = $(point).position();
|
||
|
|
pos.left += point.clientWidth/2;
|
||
|
|
return pos;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
path1.setAttribute('d', createLine([c1Pos.left, c1Pos.top], [c2Pos.left, c2Pos.top]));
|
||
|
|
path2.setAttribute('d', createLine([c3Pos.left, c3Pos.top], [c2Pos.left, c2Pos.top]));
|
||
|
|
|
||
|
|
function createLine(source, target){
|
||
|
|
var dx = target[0] - source[0],
|
||
|
|
dy = target[1] - source[1],
|
||
|
|
dr = Math.sqrt(dx * dx + dy * dy)/1.5;
|
||
|
|
|
||
|
|
return "M" +
|
||
|
|
source[0] + "," +
|
||
|
|
source[1] + "A" +
|
||
|
|
dr + "," + dr + " 0 0,1 " +
|
||
|
|
target[0] + "," +
|
||
|
|
target[1];
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|