有趣的svg动画
邵预鸿 Lv5

请参考stroke-dasharray与stroke-dashoffset的用法

参考网站: https://www.cnblogs.com/daisygogogo/p/11044353.html

效果图

img

参考如下:

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
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
svg{
width:1300px;
height:800px;
background-color: #eee;
}
.line{
stroke-width: 10px;
stroke: #ddd;
stroke-linecap: round;
stroke-dasharray: 180px 180px;
stroke-dashoffset: 0;
animation: change1 3s infinite;
}
@keyframes change1{
from{
stroke-dashoffset: 180px;
stroke: red;
}
to{
stroke-dashoffset:0;
stroke: red;
}
}
.circle{
fill: darkcyan;
stroke-width: 3px;
stroke:red;
stroke-dasharray: 314px 314px;
animation: change2 3s infinite;
}
.circle2{
fill:transparent;
stroke-width: 3px;
stroke:blue;
}
rect{
stroke-dasharray: 30px 30px;
animation: change3 8s 1 forwards;
}
ellipse{
stroke-dasharray: 30px 30px;
animation: change4 5s 3s 1 forwards;
stroke-dasharray:150px 150px;
stroke-dashoffset: 150px;
}
path{
animation: change2 2s 6s forwards;
stroke-dashoffset: 1000px;
stroke-dasharray: 1000px 1000px;
}
path:nth-of-type(1){
animation-delay: 6s;
}
path:nth-of-type(2){
animation-delay: 6.2s;
}
path:nth-of-type(3){
animation-delay: 6.5s;
}
path:nth-of-type(4){
animation-delay: 6.8s;
}
path:nth-of-type(5){
animation-delay: 7s;
}
path:nth-of-type(6){
animation-delay: 7.2s;
}
path:nth-of-type(7){
animation-delay: 7.5s;
}


@keyframes change2{
from{
stroke-dashoffset: 1000px;
}
to{
stroke-dashoffset: 0;
}
}
@keyframes change3{
0%{

stroke-dasharray:100px 100px;
}

100%{

stroke-dasharray: 2200px 2200px;
}
}
@keyframes change4{
0%{

stroke-dasharray:2px 2px;
}

100%{
stroke-dashoffset: 0px;
stroke-dasharray: 150px 150px;
}
}

</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<!-- <line x1="20" y1="20" x2="200" y2="20" class="line"></line>
<circle cx="200" cy="200" r="50" class="circle2"></circle>
<circle cx="200" cy="200" r="50" class="circle"></circle> -->
<rect id="svg_7" height="654" width="352" y="101.95313" x="611.5" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
<rect id="svg_8" height="551" width="322" y="138.95313" x="625.5" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
<ellipse ry="9.5" rx="10" id="svg_9" cy="120.45313" cx="922.5" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
<ellipse ry="20.5" rx="27" id="svg_10" cy="727.45313" cx="792.5" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
<path id="svg_11" d="m692.69775,296.81163c-3.34609,-0.74257 -4.49991,-5.93008 -2.50499,-9.03796c2.64752,-4.80655 8.31081,-8.04678 12.74807,-5.01396c0.08844,-16.9258 0.03739,-33.85252 0.05092,-50.77872c11.06404,-2.73912 22.15202,-5.33736 33.22025,-8.05265c-0.02397,18.97007 -0.04794,37.94015 -0.07191,56.91022c-1.73395,5.73769 -7.33677,9.71642 -12.2154,7.93726c-2.90449,-1.06693 -3.60081,-5.6676 -1.98347,-8.4865c2.21479,-4.20492 6.33707,-7.09196 10.48129,-6.30434c1.18264,-0.1468 2.92417,2.20282 2.42431,-0.45521c0,-9.51038 0,-19.02076 0,-28.53114c-10.15633,2.50895 -20.33273,4.89873 -30.49375,7.38053c-0.04688,11.87963 0.11575,23.76505 -0.11733,35.64015c-0.73459,4.5901 -4.40603,7.77115 -7.96865,8.6993c-1.17916,0.17242 -2.38925,0.32188 -3.56935,0.09302l0,0zm26.49381,-51.72607c5.21836,-1.26022 10.43918,-2.5053 15.65527,-3.77949c0.66382,-3.24525 -2.30698,-1.13769 -3.75984,-1.05847c-8.91004,2.1584 -17.82523,4.28485 -26.73391,6.45164c-0.66382,3.24525 2.30698,1.13769 3.75984,1.05846c3.69251,-0.89304 7.3855,-1.78303 11.07864,-2.67215l0,0zm0,-5.67991c5.21836,-1.26022 10.43918,-2.5053 15.65527,-3.77948c0.66382,-3.24525 -2.30698,-1.13769 -3.75984,-1.05847c-8.91004,2.1584 -17.82523,4.28485 -26.73391,6.45164c-0.66382,3.24525 2.30698,1.13769 3.75984,1.05847c3.69251,-0.89305 7.3855,-1.78303 11.07864,-2.67216l0,0zm0,-5.67991c5.21836,-1.26022 10.43918,-2.5053 15.65527,-3.77949c0.66382,-3.24525 -2.30698,-1.13769 -3.75984,-1.05847c-8.91004,2.1584 -17.82523,4.28485 -26.73391,6.45164c-0.66382,3.24525 2.30698,1.13769 3.75984,1.05847c3.69251,-0.89304 7.3855,-1.78303 11.07864,-2.67216l0,0z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
<path id="svg_13" d="m688.69775,555.81163c-3.34608,-0.74258 -4.49991,-5.93008 -2.50499,-9.03796c2.64752,-4.80656 8.31082,-8.04678 12.74807,-5.01396c0.08844,-16.9258 0.0374,-33.85252 0.05093,-50.77873c11.06404,-2.73912 22.15201,-5.33736 33.22024,-8.05264c-0.02396,18.97007 -0.04793,37.94015 -0.0719,56.91022c-1.73396,5.73768 -7.33677,9.71642 -12.2154,7.93726c-2.90449,-1.06693 -3.60081,-5.66761 -1.98347,-8.4865c2.2148,-4.20491 6.33707,-7.09196 10.4813,-6.30434c1.18264,-0.1468 2.92417,2.20282 2.4243,-0.4552c0,-9.51039 0,-19.02076 0,-28.53114c-10.15632,2.50895 -20.33273,4.89873 -30.49375,7.38053c-0.04687,11.87963 0.11575,23.76504 -0.11733,35.64014c-0.73459,4.5901 -4.40603,7.77116 -7.96865,8.6993c-1.17915,0.17243 -2.38925,0.32189 -3.56935,0.09302l0,0zm26.49381,-51.72607c5.21836,-1.26022 10.43918,-2.5053 15.65527,-3.77948c0.66382,-3.24526 -2.30697,-1.1377 -3.75984,-1.05847c-8.91004,2.1584 -17.82523,4.28485 -26.73391,6.45164c-0.66382,3.24525 2.30698,1.13769 3.75984,1.05846c3.69251,-0.89304 7.3855,-1.78303 11.07864,-2.67215l0,0zm0,-5.67991c5.21836,-1.26022 10.43918,-2.5053 15.65527,-3.77948c0.66382,-3.24526 -2.30697,-1.13769 -3.75984,-1.05847c-8.91004,2.1584 -17.82523,4.28485 -26.73391,6.45164c-0.66382,3.24525 2.30698,1.13769 3.75984,1.05847c3.69251,-0.89305 7.3855,-1.78304 11.07864,-2.67216l0,0zm0,-5.67991c5.21836,-1.26022 10.43918,-2.5053 15.65527,-3.77949c0.66382,-3.24525 -2.30697,-1.13769 -3.75984,-1.05846c-8.91004,2.1584 -17.82523,4.28485 -26.73391,6.45164c-0.66382,3.24525 2.30698,1.13769 3.75984,1.05847c3.69251,-0.89305 7.3855,-1.78304 11.07864,-2.67216l0,0z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
<path id="svg_16" d="m867.44008,327.8433c0,0 9.6754,2.64588 11.97335,11.79293c0,0 2.056,3.55302 1.45131,5.44291c-0.60469,1.88985 -1.57228,2.49463 -1.81414,2.72144c0,0 1.20945,-1.73873 -2.90261,-4.53577c0,0 -2.11652,-0.45357 -2.53981,-0.90715c-0.42329,-0.45357 -6.65184,-1.9655 -7.98224,1.81429c-1.33036,3.77983 -1.63271,10.12985 -1.45131,10.43221c0.1814,0.30237 6.3495,6.04769 6.89373,7.71078c0.54424,1.66309 3.44688,5.06486 4.71679,4.9893c1.26987,-0.07556 4.29346,-0.07556 5.07959,-1.36072c0.78609,-1.28516 3.08405,-1.43632 3.62828,0c0.54424,1.43628 0.36283,1.36072 0.36283,1.36072c0,0 1.93509,-0.52913 2.53981,1.36072c0.60469,1.88989 -0.9071,2.72144 -1.0885,2.72144c-0.1814,0 1.14896,-2.87264 -0.72567,-2.26786c0,0 -1.08847,0.05671 -1.08847,-0.45357c0,-0.51028 0.63495,2.66477 0,2.72144c0,0 -2.13163,-2.9482 -2.53981,-1.36072c0,0 -1.36059,0.34019 -1.81414,0.45357c-0.45352,0.11338 -0.36283,0.45357 -0.36283,0.45357c0,0 -1.17919,0.56696 -0.3628,2.26786c0,0 0,0.62367 -0.36283,0.90719c-0.36283,0.28348 0.22678,1.6442 1.81414,0.45357c0,0 0.40818,-0.45357 0.36283,0c-0.04537,0.45357 -1.63274,2.89153 -3.62828,-0.45357c0,0 -0.72567,-2.55138 0.36283,-3.17505c1.08847,-0.62367 -0.36283,-1.871 -1.81414,-0.90715c0,0 -0.09072,1.81429 0.3628,2.26786c0.45355,0.45357 -0.77101,0.05671 -1.08847,-0.45357c-0.31746,-0.51024 -0.72567,1.07724 -0.72567,1.36072c0,0.28348 -0.40818,1.24734 -0.72564,0.90719c-0.31749,-0.34019 -3.31082,-0.73709 -3.26548,-0.45361c0.04537,0.28352 -1.40593,1.47414 -1.81414,0.90719c-0.40818,-0.567 -2.67584,-3.45853 -2.90261,-3.17505c-0.22678,0.28348 1.54202,3.45853 2.53981,4.0822c0.99775,0.62363 5.17031,1.02053 6.5309,-0.45357c0,0 2.08626,-0.51028 2.17698,0c0,0 2.35838,1.19062 2.17698,1.81429c-0.18143,0.62367 -0.18143,0.28348 -0.36283,0c-0.1814,-0.28352 -1.67808,-1.30405 -1.81414,-0.90715c-0.13606,0.39686 0,0.45357 0,0.45357c0,0 1.90486,0.68034 1.81414,0.90715c0,0 2.22232,1.13391 1.81414,3.62858c0,0 -0.68029,0.62367 -0.72567,0c-0.04534,-0.62367 0.27212,-2.32458 -1.08847,-2.26786c0,0 -0.22678,0.90715 -1.08847,0.45357c-0.86173,-0.45357 0.49886,-1.41743 -3.99112,-0.90715c0,0 0.1814,1.07724 0.72564,1.36072c0.54424,0.28348 1.45134,0.28348 1.45134,1.36072c0,0 0.58958,0.90715 0,1.81429c0,0 -0.36283,0.28348 -0.36283,0c0,-0.28348 0.36283,-1.6442 -1.45131,-2.26786c-1.81417,-0.62367 -1.45134,-0.45357 -1.45134,-0.45357c0,0 0.31749,2.72144 -0.36283,2.72144c-0.68029,0 0.45355,1.70091 1.81417,0.90715c0,0 0.13603,-0.68034 0.3628,-0.45357c0.22678,0.22681 -1.13381,3.5152 -3.62828,-0.45357c0,0 -0.81635,-2.09777 0,-2.72144c0,0 0.54424,-2.09777 -2.17698,-1.36072c0,0 -1.13381,0.22677 -1.08847,0c0.04534,-0.22681 -0.1814,1.07724 0,1.36072c0.1814,0.28348 -2.13163,-0.62367 -2.17698,-0.90715l-0.72564,0c0,0 0.42329,2.64588 0.72564,2.72144c0.30235,0.07556 -1.39082,-1.28516 -1.81414,-2.26786c0,0 0,1.88985 0.36283,2.26786c0.36283,0.37801 -1.63274,-2.0411 -1.45131,-2.26786c0,0 0.06046,2.41907 0.72564,3.62858c0.66518,1.20951 -1.45131,-1.13391 -1.81414,-1.81429c0,0 -0.3628,0.30237 0,0.90715c0.36283,0.60478 -1.20942,-0.60478 -1.45131,-2.26786c0,0 -1.02802,-1.05835 -1.45131,-1.36072c0,0 0.06046,2.57023 0.36283,2.72144c0,0 -0.84661,-0.83158 -1.0885,-1.81429c0,0 -0.48375,0.90715 -0.36283,1.36072c0,0 -1.39082,-1.9655 -1.81414,-3.62858c-0.42329,-1.66309 -0.3628,0.45357 -0.3628,0.45357c0,0 -0.84661,-0.15125 -1.45134,-3.17501c0,0 -3.50734,4.61129 -4.71676,4.9893c-1.20942,0.37797 1.45131,-1.81429 1.45131,-1.81429c0,0 -1.99554,0.75594 -2.17698,1.36072c0,0 0.18143,-0.83158 1.0885,-1.81429c0.90707,-0.98275 -1.0885,-0.45357 -1.0885,-0.45357c0,0 -0.42329,-0.15125 -0.3628,-4.98934c0,0 -2.72125,3.62862 -4.35395,3.62862c-1.63274,0 1.5118,-1.51196 1.81414,-2.72148c0.30235,-1.20951 -0.66518,-0.83154 -1.0885,-0.45357c-0.42329,0.37801 -3.56779,2.64588 -3.62828,3.17505c-0.06046,0.52913 -0.3628,-0.90715 -0.3628,-0.90715c0,0 -0.72567,0.45357 -1.45134,0.45357c-0.72564,0 2.11649,-1.66309 2.53981,-2.72148c0.42332,-1.05835 -3.93063,1.88989 -5.44243,3.17505c0,0 -1.26991,0.52913 -1.45131,0c-0.18143,-0.52918 2.17698,-2.57023 2.17698,-2.72148c0,-0.1512 0.84658,-1.43628 -0.72567,-0.45357c-1.57225,0.98275 -3.62828,0.22681 -5.07959,0.90715c-1.45134,0.68038 -3.02356,2.79704 -5.07962,2.72148c-2.05603,-0.0756 -2.05554,3.17501 -5.80523,3.17501c-2.17698,0 -1.26991,1.05835 -2.17698,0.90715c-0.90707,-0.1512 1.08847,-1.36072 1.08847,-1.36072c0,0 -2.17698,0.90715 -2.53978,0.90715c-0.36283,0 -1.99558,0.07556 1.81411,-1.81429c0,0 -2.78167,0 -1.81411,-0.45357c0.96753,-0.45357 3.38639,-1.36072 3.26545,-1.81429c-0.12098,-0.45357 -2.60027,-0.37801 -1.81414,-0.90715c0.78609,-0.52918 5.07959,-2.49467 3.99112,-2.72148c-1.0885,-0.22677 -2.66076,-0.30237 -1.81414,-0.90715c0.84661,-0.60478 11.24765,-2.04106 12.69899,-3.62858c1.45131,-1.58753 5.20054,-6.19881 6.16806,-6.35002c0.96756,-0.15125 0,-1.28516 -0.72564,-0.90719c-0.72567,0.37801 -1.39085,-0.22677 -1.0885,-2.72144c0.30238,-2.49463 -3.11203,5.47047 -5.07959,2.72144c-1.02802,-1.43628 -0.24189,-2.49463 -1.45131,-2.26786c-1.20942,0.22681 -1.14896,-1.66309 -1.45131,-0.90715c-0.30235,0.75594 -2.84216,5.44291 -3.99112,4.98934c-1.14896,-0.45357 -0.30235,-0.75594 -1.0885,-0.90715c-0.78613,-0.15125 -1.33036,-0.45357 -1.45131,-1.36076c-0.12094,-0.90715 -0.84658,0.60482 -1.08847,-0.90715c-0.24189,-1.51192 -0.42329,-3.40178 -1.45131,-1.81429c-1.02805,1.58753 -1.39088,0.52918 -1.45134,0c-0.06046,-0.52913 -2.23743,0.30237 -2.17694,-1.36072c0.06042,-1.66309 -2.11652,0.52918 -1.81417,-1.36072c0.30238,-1.88985 -1.83906,-0.25613 -1.45131,-1.81429c0.84661,-3.40182 -2.90261,-0.30237 -2.53978,-1.81429c0.3628,-1.51192 -1.75369,-0.30237 -1.45134,-1.81429c0.30238,-1.51192 -2.0134,-0.98679 -1.81414,-2.26786c0.42329,-2.72148 -2.17694,-0.83158 -1.81414,-3.17505c0.36283,-2.34342 -1.65115,-0.01571 -1.45131,-1.81429c0.30238,-2.72144 -2.59169,-1.73316 -1.81414,-3.62858c1.20945,-2.94824 -1.2436,-1.68086 -0.72567,-3.17501c0.78613,-2.26786 -5.05088,0.2516 -3.62828,-3.62862c0.66521,-1.81429 -3.95063,-3.02224 -1.81414,-4.53573c3.62828,-2.57023 -5.56334,-1.28516 -1.08847,-5.44287c4.17252,-2.41907 4.4282,-2.64691 -0.72567,-2.26786c-2.05603,0.1512 -5.14008,-3.40182 -2.17694,-3.62862c2.9631,-0.22677 9.01022,-2.04106 2.17694,-2.72144c-6.83324,-0.68034 -7.07513,-3.77979 -4.35392,-3.62858c2.72121,0.1512 13.36417,0.1512 10.52202,-0.90715c-2.84216,-1.05835 -15.84924,-3.64483 -10.88485,-6.35002c2.35838,-1.28516 18.97648,5.54797 14.1503,0.90715c-0.78609,-0.75594 -8.46598,-3.47742 -11.24769,-7.25721c-2.78167,-3.77979 -2.23743,-4.30896 -0.72564,-3.62858c1.5118,0.68034 19.04839,10.65898 16.32728,7.25716c-0.48378,-0.60478 -10.52202,-6.57683 -11.97335,-11.79289c-1.45131,-5.21611 -0.06046,-3.85539 1.0885,-2.26791c1.14893,1.58753 17.65015,16.7473 14.87597,11.79293c-0.84661,-1.51192 -8.22409,-7.55953 -9.79638,-13.60722c-1.57228,-6.04765 -0.36283,-4.38452 0.72567,-2.72144c1.08847,1.66309 17.90283,24.32151 15.23877,16.32866c-0.60469,-1.81429 -5.9262,-7.48397 -6.5309,-12.70008c-0.60469,-5.21611 0.96753,-3.25057 1.81414,-1.36072c0.84661,1.88989 12.75948,25.40016 13.06183,21.318c0,0 0.06049,0.07556 0.36283,0c0.30235,-0.0756 -0.24189,-2.1923 0.36283,-1.81429c0,0 0.24189,-1.66309 0.72564,-1.36076c0.48378,0.30237 0.96756,0.0756 1.0885,-1.81429c0.12091,-1.88985 3.68874,0.30237 4.71676,9.97864c0,0 0.72567,0.98151 0.72567,3.17501c0,1.13395 4.35392,6.65243 6.89373,6.35006c2.53981,-0.30237 6.16809,6.35002 7.25657,6.80359c1.08847,0.45357 3.50734,3.17501 7.25657,0.45357c3.74923,-2.72144 7.438,-3.62858 4.35395,-4.08215c-3.08405,-0.45357 -2.47932,-1.9655 -1.08847,-2.26786c1.39082,-0.30237 7.43797,-0.45357 5.44243,-1.81429c-1.99558,-1.36076 -3.7194,-8.63075 -1.0885,-6.80363c1.0885,0.75594 4.95412,7.47333 4.35395,2.72144c-0.18143,-1.43628 -2.53981,-3.17501 -1.81414,-8.16431c0.72564,-4.98934 1.73174,-1.01999 1.81414,-0.45357c0.12094,0.83154 3.05458,11.15574 3.62828,5.89645c0.1814,-1.66309 -1.33036,-3.85539 -0.72567,-9.97864c0.60469,-6.12321 1.45131,0 1.45131,0c0,0 1.72537,6.27062 1.45134,9.52507c-0.12098,1.43632 1.57225,0.90715 1.45131,-1.81429c-0.12098,-2.72144 -1.02802,-8.69348 -0.36283,-8.61792c0.66521,0.0756 2.65825,4.04854 2.17698,7.25721c-0.18143,1.20951 2.60027,2.41907 -0.36283,4.9893c-2.96307,2.57023 -6.16809,7.71078 -6.16809,7.71078c0,0 0.71689,3.32221 -2.90261,4.9893c-2.29792,1.05835 -0.36283,3.17501 -0.36283,3.17501z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="red" fill="none"/>
<path id="svg_17" d="m784.5803,522.37074c-0.51528,-3.99648 7.82048,-13.48717 13.89445,-21.59092c4.82241,-6.40829 10.08803,-14.17609 15.10328,-21.0297c4.1921,-5.72837 13.44314,-15.39803 14.48588,-21.66106c1.21823,-7.31705 3.39667,-20.80108 5.73652,-30.86328c1.77994,-7.68921 5.15751,-17.79911 6.99353,-17.97635c0.71202,-0.06873 1.32196,3.59809 1.32196,3.59809c0,0 1.9301,24.43223 6.20376,36.20995c1.70574,4.71206 6.64946,4.5229 8.46755,4.23139c12.13443,-1.94545 28.07065,1.96301 28.07065,1.96301c0,0 5.17846,-7.91176 6.04429,-8.7531c2.19524,-2.08236 -0.00224,2.91492 5.41764,11.9799c2.97157,4.97007 4.60369,3.52578 6.94905,1.91379c0.94554,-0.66832 1.5092,-2.84966 2.29162,-4.11161c1.00123,-1.60852 21.14776,-31.8475 23.1926,-33.20788c2.04489,-1.36038 1.95568,7.34155 1.61858,9.45817c-3.71501,23.3292 -13.79983,39.37941 -13.79983,39.37941c0,0 -0.77867,3.41434 -0.42831,7.02089c0.31708,3.27439 5.72215,27.3375 2.88865,25.8776c-1.1777,0.2812 -4.08077,-2.6929 -4.08077,-2.6929c0,0 -2.91277,-3.60232 -4.99673,-8.71158c-1.47402,-3.63354 -2.33244,-9.27724 -2.33244,-9.27724c0,0 -0.66992,-4.58783 -2.65133,-5.91331c-4.7863,-3.20198 -8.36002,0.45758 -9.58927,3.61652c-1.05312,2.70114 -0.40609,7.24995 -0.40609,7.24995c0,0 1.48888,3.58779 0.57852,3.77327c-3.94917,0.75667 -5.79396,-5.63546 -8.53986,-9.17371c-0.9567,-1.22249 -2.42048,-3.24772 -4.89846,0.9157c-1.24581,2.0932 -2.15057,12.82004 -4.08827,16.38843c-1.3053,2.40379 -3.39292,-0.36706 -3.39292,-0.36706c0,0 -3.17606,-2.44574 -5.42134,-2.58179c-10.23887,11.21477 -28.83451,21.5146 -28.83451,21.5146c0,0 2.47885,6.5181 3.7786,11.01314c0.64517,2.24139 0.61925,4.17351 0.61925,4.17351c0,0 0.64707,3.07005 -0.70086,3.49695c-0.79913,0.24749 -8.57323,-2.60824 -12.72635,-6.21478c-3.49684,-3.03937 -6.25935,-7.4892 -6.25935,-7.4892c0,0 -12.72513,2.31684 -20.88676,3.05921c-4.75385,0.4166 -18.9152,0.2708 -19.62293,-5.21799z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="blue" fill="none"/>
<path id="svg_18" d="m876.4093,174.96553c-6.19809,-4.93543 -20.24611,0.98709 -27.99372,4.98711c-2.22196,-0.31008 -4.55209,-0.47804 -6.98162,-0.47804c-9.79122,0 -17.69378,2.54523 -23.69891,7.3463c-6.82959,5.52716 -10.61568,12.76493 -10.61568,21.12932c0,0.07235 0.00292,0.1447 0.00292,0.21706c9.60996,-13.30757 24.38888,-20.12932 28.30654,-21.93036c0.61981,-0.25582 0.98819,0.40052 0.41223,0.65375c-0.04385,0.10853 -0.04385,0 0,0c-6.58985,3.48839 -18.81061,13.58923 -26.73948,28.12936l-0.00877,-0.01809c-5.01987,9.16543 -9.25912,22.03889 -0.78061,26.76501c6.42321,3.57108 17.92183,-0.64083 27.1751,-5.9897c2.23365,0.27907 4.58132,0.42636 7.06056,0.42636c17.07397,0 29.05207,-8.32821 33.32641,-20.47557l-23.45332,-0.03618c-0.98526,4.29201 -4.28019,6.58402 -9.42285,6.58402c-6.46121,0 -10.9022,-3.12922 -11.19164,-10.36699l44.52097,-0.03618c0.08186,-1.49355 -0.12279,-2.54523 -0.12279,-3.71062c0,-13.56855 -9.18896,-24.17327 -24.13453,-27.55313c6.08406,-3.34369 17.46574,-8.29204 22.94461,-4.34369c4.11354,2.94575 1.85066,9.12925 0.86247,11.67449c-0.16372,0.65633 0.70167,0.76486 0.86539,0.14729c2.05239,-4.57625 2.67219,-10.72358 -0.33329,-13.12152zm-43.05331,60.49131c-7.21843,3.81139 -17.17045,6.56076 -22.04121,3.33077c-3.63407,-2.41603 -2.03484,-8.96129 1.1636,-15.34376c1.94129,2.56332 4.37082,4.87341 7.23013,6.79591c3.86503,2.56849 8.40542,4.30752 13.64748,5.21708zm-1.63138,-32.63585c0.12279,-6.29203 5.22452,-9.01814 10.57475,-9.01814c5.63675,0 10.20345,2.8734 10.20345,9.01814l-20.77821,0z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="yellow" fill="none"/>
<path id="svg_19" d="m696.40255,358.33708c-8.26397,0 -15.00373,6.39818 -15.00373,14.23968s6.73977,14.23968 15.00373,14.23968c8.26397,0 15.00373,-6.39818 15.00373,-14.23968s-6.73977,-14.23968 -15.00373,-14.23968zm38.05615,14.17221c-1.05919,-5.33621 -3.06562,-8.95334 -4.95723,-11.71972c0.14352,0.37843 0.25834,0.7598 0.39612,1.13824c-6.7168,-18.64301 -33.5955,-28.74925 -54.35732,-15.92943c-0.16074,0.79207 -0.20954,1.57828 -0.20954,2.35861c0,-0.14961 -0.01722,-0.28749 -0.01148,-0.44004c-5.00316,-0.3931 -11.06263,6.04614 -16.45043,17.84507c-2.73552,6.6798 -3.72582,13.99326 -1.18836,22.56816c1.48114,5.00472 3.81193,10.13851 7.1732,14.12234c9.96326,11.8136 25.22533,16.6335 34.11218,14.18394c0.01148,0.00293 0.02583,0.0088 0.04019,0.01173c17.13359,-0.3667 30.12228,-12.40325 34.80395,-28.07159c1.68494,-5.65598 1.79402,-10.28519 0.64872,-16.06731zm-67.43212,28.02759c-2.75561,-3.26216 -5.0376,-7.77697 -6.59912,-13.06037c-2.10402,-7.0993 -1.7567,-13.64123 1.08789,-20.57918c2.88765,-6.31603 5.70641,-10.46707 8.13193,-12.96357c0.43056,2.17673 1.49549,4.7759 3.19479,7.7711c0.62575,1.11183 1.31753,2.05645 1.98634,2.9688c0.51381,0.69526 1.02187,1.39052 1.47253,2.13859c0.35593,0.59259 0.68603,1.30545 1.01613,2.16206c-0.68603,8.07913 2.56042,15.07282 9.03611,19.59349l-7.30811,6.60059l-0.57983,0.50165c-0.59705,0.50165 -1.28308,1.09423 -1.86865,1.72789c-3.90378,4.23611 -0.71761,8.30501 0.82094,10.26172l0.19519,0.25522c0.68029,0.87128 1.47253,1.81883 2.3394,2.75171c-4.54389,-2.253 -9.10213,-5.5973 -12.92554,-10.12971zm64.04214,-12.81982c-4.59269,15.34858 -17.04174,25.52229 -31.77565,25.98874c-7.13302,-1.71029 -12.52081,-5.2218 -16.03422,-10.4348c0.01148,-0.01173 0.0287,-0.02347 0.04306,-0.03814l14.1914,-11.25328c6.38958,-0.36377 11.06263,-2.60503 13.91297,-6.68273c3.50766,-4.14224 5.14381,-8.87413 4.85964,-14.26022c5.21557,1.10597 9.72788,2.64904 13.93593,5.52396l0.33297,0.22882l0.38464,0.12614c0.44779,0.14375 0.8927,0.22295 1.31753,0.23762c0.31288,3.63766 -0.06028,6.84408 -1.16826,10.56388zm0.73196,-13.59136c-5.60021,-3.83128 -11.65968,-5.47703 -18.92761,-6.70327c1.5242,6.91742 -0.24112,11.94561 -3.80619,16.16999c-2.53172,3.62299 -6.83736,5.34501 -12.61267,5.50049l-14.98364,11.88694c-1.4266,1.19984 -1.69642,2.40262 -0.80946,3.60539c2.43699,3.7462 5.53706,6.45978 8.96148,8.44289c-0.03732,0 -0.07463,0.00587 -0.11195,0.0088c-0.00287,-0.00293 -0.01148,-0.00587 -0.01722,-0.01173c-0.05741,0.0088 -0.11769,0.01173 -0.17797,0.01467c-0.22963,0.00293 -0.45927,-0.00293 -0.68603,-0.02934c-0.44779,-0.06161 -0.90131,-0.18775 -1.31753,-0.34616c-2.57765,-0.97689 -5.42511,-3.96622 -7.4545,-6.56832c-1.66772,-2.14153 -3.46174,-4.20384 -1.17975,-6.67393c0.74057,-0.80087 1.67059,-1.50787 2.26477,-2.04765l7.23635,-6.53899c0.49371,-0.4019 1.00465,-0.81261 1.53568,-1.24091c0.15213,-0.12321 0.30714,-0.24642 0.46501,-0.37257c1.61892,-1.29665 1.38642,-0.93875 -0.31001,-1.88337c-6.94357,-3.87235 -10.55457,-10.60202 -9.62742,-18.74275c-0.42769,-1.20277 -0.90993,-2.32341 -1.48688,-3.29736c-1.04197,-1.76016 -2.39394,-3.23282 -3.42729,-5.05459c-2.58339,-4.56468 -5.30168,-11.4469 0.03732,-10.8015c-0.01435,-0.15548 -0.00574,-0.3227 -0.01435,-0.48111c0.26982,5.87013 4.38027,11.21514 5.00029,14.33942c0.22389,1.12063 0.84391,2.06819 1.7567,0.82141c7.28515,-9.95956 17.42063,-8.95627 23.90493,-3.84888c1.2716,0.99742 1.96337,2.21487 3.11155,3.25629c0.44205,0.40484 0.9415,0.7598 1.53568,1.02969c2.13273,0.97395 5.18687,0.91528 7.48321,1.27318c3.93536,0.61019 7.77025,1.36119 11.39847,2.38208c0.71761,0.08801 1.21706,-0.01173 1.49549,-0.29629c0.60566,-0.61019 -0.00574,-2.6021 -0.34732,-3.70513c0.79511,2.36155 1.53855,4.72016 2.21884,7.08464c0.51955,1.8423 0.39612,3.32963 -1.10799,2.82799z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
<path id="svg_20" d="m778.6232,634.69765c11.48741,0 22.2881,3.45691 30.40169,9.72811c8.13225,6.27407 12.6033,14.63376 12.6033,23.52991l17.70882,0c0,-25.84217 -27.2406,-46.86188 -60.71754,-46.86188l0,13.60386l0.00373,0zm0.02239,-24.12089c40.95234,0 74.26134,25.7475 74.26134,57.39325l17.70135,0c0,-39.14767 -41.25464,-70.99998 -91.96642,-70.99998l0,13.60673l0.00373,0zm24.48258,47.88318c0,5.20688 -5.48992,9.42975 -12.25995,9.42975s-12.25995,-4.22288 -12.25995,-9.42975c0,-5.20114 5.48992,-9.42401 12.25995,-9.42401s12.25995,4.22001 12.25995,9.42401z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
</svg>
</body>
</html>

动画2

img

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
<!DOCTYPE html>
<html lang="en">


<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}


svg {
background-color: #eee;
width: 1000px;
height: 400px;
}


.text {
font-size: 150px;
font-weight: bold;
fill: transparent;
/* stroke: red; */
stroke-width: 2px;
stroke-dasharray: 10px 60px;
stroke-dashoffset: 0;

}
#use1{
stroke: red;
stroke-dasharray: 10px 40px;
animation: change1 5s forwards 1;
}
#use2{
stroke: orange;
animation: change2 5s forwards 1;
}
#use2{
stroke: blue;
animation: change3 5s forwards 1;
}


@keyframes change1 {
0% {
stroke-dashoffset: 300px;
stroke-dasharray: 100px;
}


100% {


stroke-dashoffset: 0px;
stroke-dasharray: 100px 30px;
}
}
@keyframes change2 {
0% {
stroke-dashoffset: 360px;
stroke-dasharray: 100px 150px;
}


100% {


stroke-dashoffset: 30px;
stroke-dasharray: 100px 30px;
}
}
@keyframes change3 {
0% {
stroke-dashoffset: 450px;
stroke-dasharray: 100px 190px;
}


100% {


stroke-dashoffset: 60px;
stroke-dasharray: 100px 30px;
}
}
</style>
</head>


<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<symbol id="text">

<text x="200" y="200" >HELLO</text>

</symbol>
<use xlink:href="#text" id="use1" class="text"></use>
<use xlink:href="#text" id="use2" class="text"></use>
<use xlink:href="#text" id="use3" class="text"></use>
</svg>
</body>


</html>

动态操作svg

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
<script>
function createSVG(){
var oSvg = document.createElementNS("http://www.w3.org/2000/svg","svg");
oSvg.setAttribute("width",1000);
oSvg.setAttribute("height",500);
document.querySelector(".box").appendChild(oSvg);
}
function createCircle(x,y){
var oCircle = document.createElementNS("http://www.w3.org/2000/svg",'circle');
oCircle.setAttribute("cx",x);
oCircle.setAttribute("cy",y);
oCircle.setAttribute("r",30);
oCircle.setAttribute("fill",'red');
oCircle.setAttribute("stroke",'blue');
document.querySelector("svg").appendChild(oCircle);
}
function createLine(){
var oLine = document.createElementNS("http://www.w3.org/2000/svg",'line');
oLine.setAttribute("x1",50);
oLine.setAttribute("y1",50);
oLine.setAttribute("x2",500);
oLine.setAttribute("y2",450);
oLine.setAttribute("stroke",'blue');
document.querySelector("svg").appendChild(oLine);
}
createSVG();
createLine();
createCircle(50,50);
createCircle(500,450);

</script>
  • 本文标题:有趣的svg动画
  • 本文作者:邵预鸿
  • 创建时间:2021-02-21 12:36:13
  • 本文链接:/images/logo.jpg2021/02/21/有趣的svg动画/
  • 版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!