-
Notifications
You must be signed in to change notification settings - Fork 4
/
stoke-dashoffset.html
129 lines (106 loc) · 5.82 KB
/
stoke-dashoffset.html
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>svg stroke-dashoffset的应用</title>
</head>
<body style="padding-left: 300px;">
<svg width="99px" height="228px" viewBox="0 0 99 228" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 51.1 (57501) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="2" fill="none" fill-rule="evenodd">
<path class="lineeee" id="Path-K" d="M20.2447307,13.999011 C2.07155905,156.148473 -3.00246175,227.223203 5.02266826,227.223203 C13.2802584,227.223203 25.6314834,153.342902 27.7142344,128.696517 C28.6676624,117.414059 63.0092249,173.341982 79.1149039,183.758554 C106.300403,201.341155 94.921514,179.978811 44.9782367,119.671522 C93.1498002,65.63687 108.572705,43.433224 91.2469505,53.0605844 C73.9211963,62.6879448 54.756459,77.8112875 33.7527385,98.4306124 C36.2962143,48.0409867 36.2962143,17.7479992 33.7527385,7.55164988 C31.2092628,-2.64469941 26.7065935,-0.49557903 20.2447307,13.999011 Z" stroke="#979797"></path>
</g>
</svg>
<svg width="124px" height="241px" viewBox="0 0 220 261" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 51.1 (57501) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M95.836117,117.042604 C131.42922,116.266943 150.105007,124.173409 173.067585,117.042604 C196.030163,109.911798 218.88474,101.299447 218.88474,79.1814889 C218.88474,48.6200666 218.88474,33.6329505 191.394447,17.2916369 C146.569202,-9.35425523 122.099635,-1.17922587 74.0421604,22.4756632 C25.9846862,46.1305522 26.6500528,41.1387313 16.1787904,72.7983796 C2.76670101,113.349559 -2.29311269,136.884538 4.07165215,178.782917 C10.436417,220.681295 15.3940507,221.866326 53.2949784,246.964493 C91.1959062,272.062659 129.655358,254.805929 154.328106,251.694363 C179.000854,248.582797 195.761923,234.248054 201.272343,228.302552 C206.782764,222.35705 218.88474,206.699673 196.030163,206.699673 C173.175586,206.699673 167.642635,217.203419 148.966848,224.361917 C130.991743,231.25184 124.406416,228.302552 104.329391,228.302552 C84.252366,228.302552 57.385153,226.161926 47.7260271,213.409553 C38.0669013,200.657181 26.1585141,158.350758 30.2022461,140.373491 C35.263791,117.871322 77.5230434,117.441691 95.836117,117.042604 Z" id="Path-E-Out" stroke="#979797"></path>
<path d="M75.7165032,52.3092266 C64.7629462,67.9875933 57.0224305,76.8153489 65.7710737,87.4016447 C74.5197168,97.9879405 86.8695764,96.6016857 114.980977,99.8212043 C143.092378,103.040723 146.716888,102.053728 160.739172,95.5113005 C174.761455,88.9688731 181.056615,86.7187419 174.213129,72.1850455 C167.369643,57.6513491 166.229059,50.9003643 148.187036,44.5488866 C130.145012,38.1974089 86.6700602,36.6308598 75.7165032,52.3092266 Z" id="Path-E-In" stroke="#979797"></path>
</g>
</svg>
<svg
style="
margin-left: 12px;
margin-bottom: 26px;" width="117px" height="181px" viewBox="0 0 117 224" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 51.1 (57501) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M42.1713583,150.118842 C38.2092136,145.6648 29.7238887,37.8514909 19.0910599,23.7149579 C19.0910599,23.7149579 -4.39189559,4.31390129 2.36066208,47.1563983 C6.7735423,75.1545017 11.3890494,135.504719 35.1919706,218.158423 C37.3609495,224.890792 41.008127,224.890792 46.1335031,218.158423 C92.805027,101.845076 116.140789,31.0846498 116.140789,5.87714498 C116.140789,1.6620443 104.621994,-2.0838655 99.9902172,5.87714498 C83.7245168,33.8343247 46.1335031,154.572884 42.1713583,150.118842 Z" id="Path-V" stroke="#979797"></path>
</g>
</svg>
<svg width="600" height="300">
<path id="line" d="M100 100 C 200 200, 400 200, 500 100" stroke="red" fill="transparent" />
</svg>
<svg width="300" height="300">
<line x1="0" y1="300" x2="300" y2="300" stroke="skyblue" id="Line" stroke-width="5"></line>
</svg>
<style>
@keyframes fillColor {
from {
fill: white;
}
to {
fill:skyblue;
}
}
path {
stroke-width: 2px;
}
#Path-K {
stroke-dasharray: 800px;
animation: 1s linear forwards draw, 1s linear 1s forwards fillColor ;
stroke-width: 2px;
}
@keyframes draw {
from{
stroke-dashoffset: 800px;
}
}
#Path-E-In {
stroke-dasharray: 307px;
animation: draw-e-in 1s linear forwards;
stroke-width: 3px;
}
@keyframes draw-e-in {
from{
stroke-dashoffset: 307px;
}
to {
fill: white;
}
}
#Path-E-Out {
stroke-dasharray: 1136px;
animation: draw-e-out 1s linear forwards, 1s linear 1s forwards fillColor;
stroke-width: 3px;
}
@keyframes draw-e-out {
from{
stroke-dashoffset: 1136px;
}
}
#Path-V {
stroke-width: 2px;
stroke-dasharray: 780px;
animation: draw-v 1s linear forwards, 1s linear 1s forwards fillColor;
transition: fill 2s ease 3s;
}
.a {
fill: skyblue;
transition: fill 2s ease 3s;
}
@keyframes draw-v {
from{
stroke-dashoffset: 780px;
}
}
</style>
</body>
</html>