SVG 教程 (http://editor.method.ac/)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
svg{
border: 1px solid black;
}
rect{
stroke: black;
fill: transparent;
}
polyline{
stroke: black;
}
.eye{
stroke: black;
stroke-width: 3;
fill: transparent;
}
.nodes{
fill:transparent;
stroke-width: 3;
}
ellipse{
fill:transparent;
stroke-width: 3;
stroke: black;
}
text{
font-size: 40px;
font-weight: bold;
fill: skyblue;
}
</style>
</head>
<body>
<svg width="500" height="500">
<rect x="100" y="100" width="300" height="300" rx="10" ry="10"/>
<polyline points="120 100,163 70,206 100,249 70,292 100,335 70,380 100"/>
<circle class="eye" cx="175" cy="175" r="20"/>
<circle class="eye" cx="325" cy="175" r="20"/>
<circle class="eyeball" cx="180" cy="180" r="7"/>
<circle class="eyeball" cx="330" cy="180" r="7"/>
<polyline class="nodes" points="240 275,250 250,260 275,240 275"/>
<ellipse cx="250" cy="310" rx="50" ry="25"/>
<text x="140" y="449" >hello world</text>
</svg>
path的各种指令, 就很类似 canvas的画图方式.
简单讲,T x,y 就是在增加一条 二次贝塞尔曲线
S x2,y2,x,y 就是在增加一条 三次贝塞尔曲线
简单的动画效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<style type="text/css">
svg{
border: 1px solid black;
}
path{
stroke-width: 10;
stroke: black;
fill: transparent;
stroke-dasharray: 200px;
stroke-dashoffset: 200px;
animation: name 2s linear alternate-reverse infinite both;
}
@keyframes name{
from{
stroke-dashoffset: 200px;
}
to{
stroke-dashoffset: 0px;
}
}
</style>
</head>
<body>
<svg width="500" height="500">
折线也可以,嗯.. 估计任何线条都可以
<path d="M 100 100 L 200 100 200 200"></path>
</svg>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<svg width="500" height="500">
<path d="M 100 100 L 200 100 200 200"></path>
<ellipse cx="300" cy="150" rx="200" ry="80"/>
</svg>
<script type="text/javascript">
var path = document.getElementsByTagName('path')[0];
var path1 = document.getElementsByTagName('ellipse')[0];
console.log(path.getTotalLength());
console.log(path1.getTotalLength());
貌似 除了path, 其他的线条的总长也能获取.
1
2
3
4
5
6
7
8
9
10
11
12
var svg = document.createElementNS("http://www.w3.org/2000/svg","svg");
var line = document.createElementNS("http://www.w3.org/2000/svg","line");
svg.setAttribute("width",500);
svg.setAttribute("height",500);
line.setAttribute("x1",100);
line.setAttribute("y1",100);
line.setAttribute("x2",200);
line.setAttribute("y2",200);
svg.appendChild(line);
document.body.appendChild(svg);
最后一项区别不太懂. canvas是脚本驱动,同步会阻塞,所以只能小面积? svg 是异步加载所以是大面积? 什么意思?
Canvas or SVG？一张好图，两手准备，就在 ECharts 4.0
作业2 仪表盘
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewprot" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>dddd</title>
<style type="text/css">
svg{
border: 1px solid black;
margin: 100px;
}
path{
stroke: #aaa;
stroke-width:20;
fill: transparent;
stroke-linecap: round;
}
#cover{
stroke: #f00;
/*stroke-dasharray: 100px;*/
/*stroke-dashoffset: 100%;*/
transition: stroke-dashoffset 2s;
display: none;
}
input{
position: absolute;
left: 0;
right: 0;
top: 50px;
width: 100px;
margin: auto;
}
</style>
</head>
<body>
<svg width="500" height="500">
<path d="M200 300 A100 100 0 1 1 300 300"></path>
<path id="cover" d="M200 300 A100 100 0 1 1 300 300"></path>
</svg>
<input type="text" name="inp" id="inp" value="" />
<script type="text/javascript">
var inp = document.getElementById("inp");
// 获取长度
var cover = document.getElementById("cover");
var pathLength = cover.getTotalLength();
cover.style.strokeDasharray = pathLength;
cover.style.strokeDashoffset = pathLength + "px";
cover.style.display = "block";
inp.onchange = function () {
var percent = (100 - Number(this.value)) / 100;
cover.style.strokeDashoffset = percent * pathLength + "px";
}
</script>
</body>
</html>
