Skip to content

Commit 4f61f49

Browse files
author
liyonglu
committed
svg 简单两个矩形的实现
svg 简单两个矩形的实现
1 parent 4fab11e commit 4f61f49

File tree

1 file changed

+112
-0
lines changed

1 file changed

+112
-0
lines changed

‎svg/demo.html‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>svg画流程图</title>
9+
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
10+
<style>
11+
.ball {
12+
width: 10px;
13+
height: 10px;
14+
background-color: red;
15+
border-radius: 50%;
16+
/* offset-path: path('M10 80 Q 77.5 10, 145 80 T 280 80'); */
17+
offset-distance: 0%;
18+
animation: red-ball 2s linear alternate infinite;
19+
}
20+
21+
@keyframes red-ball {
22+
from {
23+
offset-distance: 0%;
24+
}
25+
26+
to {
27+
offset-distance: 100%;
28+
}
29+
}
30+
</style>
31+
</head>
32+
33+
<body>
34+
<svg width="1000" height="1000">
35+
36+
<g id="g1">
37+
38+
<rect width="300" height="100" style="fill:red;stroke-width:1;
39+
stroke:rgb(0,0,0)" />
40+
<text x="150" y="50" alignment-baseline="middle" text-anchor="middle" style="fill:blue">TEXT</text>
41+
</g>
42+
43+
<g id="g2">
44+
<rect x="500" y="300" width="300" height="100" style="fill:red;stroke-width:1;
45+
stroke:rgb(0,0,0)" />
46+
</g>
47+
<g id="g3">
48+
<defs>
49+
<marker id="markerArrow" markerWidth="13" markerHeight="13" refx="2" refy="6" orient="auto">
50+
<path d="M2,2 L2,11 L10,6 L2,2" style="fill: red;" />
51+
</marker>
52+
</defs>
53+
<!-- <line x1="200" y1="300" x2="100" y2="200" style="stroke:red;marker-end: url(#markerArrow);"></line> -->
54+
<!-- <text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">TEXT</text> -->
55+
56+
</g>
57+
58+
</svg>
59+
<script>
60+
var g1 = document.getElementById("g1");
61+
var g2 = document.getElementById("g2");
62+
var g3 = document.getElementById("g3");
63+
64+
console.log(g1.getBBox()); // 相对于视口
65+
console.log(g1.getBoundingClientRect()); // 相对于浏览器
66+
var g1Box = g1.getBBox();
67+
var g2Box = g2.getBBox();
68+
var path = createSVGPath(g1Box.width / 2, g1Box.height, g2Box.width / 2, 0, g2Box.x, g2Box.y, 2, "red");
69+
path.setAttribute('marker-end', 'url(#markerArrow)');
70+
g3.appendChild(path);
71+
// 创建两个矩形的连线
72+
function createSVGPath(startX, startY, endX, endY, x, y, width, color) {
73+
var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
74+
75+
var realEndX = endX + x;
76+
var realEndY = endY + y - 13;
77+
var dArr = ["M" + startX, startY, "L" + realEndX, realEndY];
78+
// var cx = startX,
79+
// cy = startY + R;
80+
81+
// var theta2 = theta % 360;
82+
// // 避免360度与0度一样的情况
83+
// theta = theta > 0 && theta2 == 0 ? 359.9 : theta2;
84+
85+
// var alpha = (theta + 90) / 180 * Math.PI;
86+
// var dx = realR * Math.cos(alpha);
87+
// var dy = realR * Math.sin(alpha);
88+
// var x = cx + dx,
89+
// y = cy - dy;
90+
91+
// dArr.push(x.toFixed(2));
92+
// dArr.push(y.toFixed(2));
93+
var d = dArr.join(" ");
94+
console.log(d, path);
95+
path.setAttribute('d', d);
96+
path.setAttribute('stroke', color);
97+
path.setAttribute('stroke-width', width);
98+
path.setAttribute('fill', 'none');
99+
path.setAttribute('class', 'path');
100+
cratedBall(path);
101+
return path;
102+
}
103+
// 創建運動的小球
104+
function cratedBall(path) {
105+
var ball = $("<div class='ball'></div>");
106+
ball.css('offset-path', path);
107+
$('body').append(ball);
108+
}
109+
</script>
110+
</body>
111+
112+
</html>

0 commit comments

Comments
 (0)