-
Notifications
You must be signed in to change notification settings - Fork 0
/
svg_11.html
224 lines (219 loc) · 72.2 KB
/
svg_11.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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>学习SVG（十一）动画 | SuperFan</title>
<meta name="generator" content="VuePress 1.9.7">
<link rel="icon" href="/img/logo.jpg">
<meta name="description" content="">
<link rel="preload" href="/assets/css/0.styles.2df1fec4.css" as="style"><link rel="preload" href="/assets/js/app.468d81f0.js" as="script"><link rel="preload" href="/assets/js/3.98f38222.js" as="script"><link rel="preload" href="/assets/js/11.a07021ac.js" as="script"><link rel="prefetch" href="/assets/js/10.75acb69d.js"><link rel="prefetch" href="/assets/js/100.62ab1ac5.js"><link rel="prefetch" href="/assets/js/101.083c1407.js"><link rel="prefetch" href="/assets/js/102.aa2a3c9d.js"><link rel="prefetch" href="/assets/js/103.7f7aec22.js"><link rel="prefetch" href="/assets/js/104.5858c5d9.js"><link rel="prefetch" href="/assets/js/105.46ed2904.js"><link rel="prefetch" href="/assets/js/106.d0dc0e90.js"><link rel="prefetch" href="/assets/js/107.3e0b5d6c.js"><link rel="prefetch" href="/assets/js/108.10369f73.js"><link rel="prefetch" href="/assets/js/109.1e2a4664.js"><link rel="prefetch" href="/assets/js/110.9a3785b6.js"><link rel="prefetch" href="/assets/js/111.177df3f2.js"><link rel="prefetch" href="/assets/js/112.281ea3ba.js"><link rel="prefetch" href="/assets/js/113.bb855529.js"><link rel="prefetch" href="/assets/js/114.99002bd6.js"><link rel="prefetch" href="/assets/js/115.ae84ff88.js"><link rel="prefetch" href="/assets/js/116.84ccabcf.js"><link rel="prefetch" href="/assets/js/117.08946e95.js"><link rel="prefetch" href="/assets/js/118.1116fe87.js"><link rel="prefetch" href="/assets/js/119.d056f04c.js"><link rel="prefetch" href="/assets/js/12.e1bf2385.js"><link rel="prefetch" href="/assets/js/120.f6c88d2d.js"><link rel="prefetch" href="/assets/js/121.fbb232a1.js"><link rel="prefetch" href="/assets/js/122.9738257b.js"><link rel="prefetch" href="/assets/js/123.4cd19117.js"><link rel="prefetch" href="/assets/js/124.3adb9591.js"><link rel="prefetch" href="/assets/js/13.89bf61e3.js"><link rel="prefetch" href="/assets/js/14.29e5bf16.js"><link rel="prefetch" href="/assets/js/15.9e13d335.js"><link rel="prefetch" href="/assets/js/16.f59fe652.js"><link rel="prefetch" href="/assets/js/17.2b6daac8.js"><link rel="prefetch" href="/assets/js/18.392684c5.js"><link rel="prefetch" href="/assets/js/19.cf8ae039.js"><link rel="prefetch" href="/assets/js/2.12b7e717.js"><link rel="prefetch" href="/assets/js/20.bf25a080.js"><link rel="prefetch" href="/assets/js/21.22619a21.js"><link rel="prefetch" href="/assets/js/22.a74b4412.js"><link rel="prefetch" href="/assets/js/23.83a3d3ea.js"><link rel="prefetch" href="/assets/js/24.ad3c232b.js"><link rel="prefetch" href="/assets/js/25.203130d6.js"><link rel="prefetch" href="/assets/js/26.e7b1aae9.js"><link rel="prefetch" href="/assets/js/27.f21654a0.js"><link rel="prefetch" href="/assets/js/28.6a0cccf9.js"><link rel="prefetch" href="/assets/js/29.78506971.js"><link rel="prefetch" href="/assets/js/30.a505f2c7.js"><link rel="prefetch" href="/assets/js/31.3762b301.js"><link rel="prefetch" href="/assets/js/32.a495ece4.js"><link rel="prefetch" href="/assets/js/33.4bae10a8.js"><link rel="prefetch" href="/assets/js/34.e47c40fc.js"><link rel="prefetch" href="/assets/js/35.ae8b060d.js"><link rel="prefetch" href="/assets/js/36.289c9f35.js"><link rel="prefetch" href="/assets/js/37.40971406.js"><link rel="prefetch" href="/assets/js/38.ecdf1421.js"><link rel="prefetch" href="/assets/js/39.272e2c70.js"><link rel="prefetch" href="/assets/js/4.3996b12f.js"><link rel="prefetch" href="/assets/js/40.a3c4e368.js"><link rel="prefetch" href="/assets/js/41.a03ab0f7.js"><link rel="prefetch" href="/assets/js/42.7827a99e.js"><link rel="prefetch" href="/assets/js/43.253384ea.js"><link rel="prefetch" href="/assets/js/44.cce7af31.js"><link rel="prefetch" href="/assets/js/45.f7db15e7.js"><link rel="prefetch" href="/assets/js/46.42bde79f.js"><link rel="prefetch" href="/assets/js/47.a0709ecf.js"><link rel="prefetch" href="/assets/js/48.286feac2.js"><link rel="prefetch" href="/assets/js/49.744a0ee4.js"><link rel="prefetch" href="/assets/js/5.659b15cb.js"><link rel="prefetch" href="/assets/js/50.d58c4700.js"><link rel="prefetch" href="/assets/js/51.9d3f2eed.js"><link rel="prefetch" href="/assets/js/52.e1c1a139.js"><link rel="prefetch" href="/assets/js/53.57cd749c.js"><link rel="prefetch" href="/assets/js/54.2e796520.js"><link rel="prefetch" href="/assets/js/55.40b3bcf4.js"><link rel="prefetch" href="/assets/js/56.9d4c5aca.js"><link rel="prefetch" href="/assets/js/57.40d7ce46.js"><link rel="prefetch" href="/assets/js/58.a74801f1.js"><link rel="prefetch" href="/assets/js/59.2a8ddfc6.js"><link rel="prefetch" href="/assets/js/6.d4ab18a7.js"><link rel="prefetch" href="/assets/js/60.e50e788a.js"><link rel="prefetch" href="/assets/js/61.c24653ba.js"><link rel="prefetch" href="/assets/js/62.45b50a63.js"><link rel="prefetch" href="/assets/js/63.02fc2376.js"><link rel="prefetch" href="/assets/js/64.3596b827.js"><link rel="prefetch" href="/assets/js/65.6861083d.js"><link rel="prefetch" href="/assets/js/66.6a904b26.js"><link rel="prefetch" href="/assets/js/67.95363924.js"><link rel="prefetch" href="/assets/js/68.ce7efd4f.js"><link rel="prefetch" href="/assets/js/69.e5766721.js"><link rel="prefetch" href="/assets/js/7.9344e582.js"><link rel="prefetch" href="/assets/js/70.eefdbfad.js"><link rel="prefetch" href="/assets/js/71.a41b985d.js"><link rel="prefetch" href="/assets/js/72.a15b5895.js"><link rel="prefetch" href="/assets/js/73.6141457f.js"><link rel="prefetch" href="/assets/js/74.424c94b0.js"><link rel="prefetch" href="/assets/js/75.f78247b4.js"><link rel="prefetch" href="/assets/js/76.8d1ddcb9.js"><link rel="prefetch" href="/assets/js/77.0f61cd18.js"><link rel="prefetch" href="/assets/js/78.21ad3c33.js"><link rel="prefetch" href="/assets/js/79.a59a7832.js"><link rel="prefetch" href="/assets/js/8.a4c7dce0.js"><link rel="prefetch" href="/assets/js/80.baca8bea.js"><link rel="prefetch" href="/assets/js/81.37d7a0b6.js"><link rel="prefetch" href="/assets/js/82.7e4c40b6.js"><link rel="prefetch" href="/assets/js/83.6ea2beeb.js"><link rel="prefetch" href="/assets/js/84.5ea3690c.js"><link rel="prefetch" href="/assets/js/85.6e4ae2a9.js"><link rel="prefetch" href="/assets/js/86.51cfa15f.js"><link rel="prefetch" href="/assets/js/87.2cfe5a5a.js"><link rel="prefetch" href="/assets/js/88.dddbcfdb.js"><link rel="prefetch" href="/assets/js/89.e6e7ab1c.js"><link rel="prefetch" href="/assets/js/9.978b2f04.js"><link rel="prefetch" href="/assets/js/90.7676beac.js"><link rel="prefetch" href="/assets/js/91.6e16a261.js"><link rel="prefetch" href="/assets/js/92.ddaeebf3.js"><link rel="prefetch" href="/assets/js/93.936f44c6.js"><link rel="prefetch" href="/assets/js/94.7a5bd4d7.js"><link rel="prefetch" href="/assets/js/95.16098644.js"><link rel="prefetch" href="/assets/js/96.a21a769e.js"><link rel="prefetch" href="/assets/js/97.ad16dbd7.js"><link rel="prefetch" href="/assets/js/98.aaf8d8a4.js"><link rel="prefetch" href="/assets/js/99.90c32a33.js">
<link rel="stylesheet" href="/assets/css/0.styles.2df1fec4.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/img/logo.jpg" alt="SuperFan" class="logo"> <span class="site-name can-hide">SuperFan</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/resources/website/websites_recom.html" class="nav-link">
Resources
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><span class="title">前端</span> <span class="arrow down"></span></button> <button type="button" aria-label="前端" class="mobile-dropdown-title"><span class="title">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
基础
</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/notes/html&css/form.html" class="nav-link">
HTML&CSS
</a></li><li class="dropdown-subitem"><a href="/notes/js/js_1.html" class="nav-link">
JavaScript
</a></li></ul></li><li class="dropdown-item"><h4>
入门
</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/notes/es6/es6.html" class="nav-link">
ES6
</a></li><li class="dropdown-subitem"><a href="/notes/sass/about.html" class="nav-link">
Sass
</a></li><li class="dropdown-subitem"><a href="/notes/ts/ts_install.html" class="nav-link">
TypeScript
</a></li><li class="dropdown-subitem"><a href="/notes/axios/axios.html" class="nav-link">
axios
</a></li></ul></li><li class="dropdown-item"><h4>
框架
</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/notes/vue/vue.html" class="nav-link">
Vue
</a></li><li class="dropdown-subitem"><a href="/notes/react/react_base.html" class="nav-link">
React
</a></li></ul></li><li class="dropdown-item"><h4>
其他
</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/notes/wx_mini_p/life_cycle.html" class="nav-link">
微信小程序
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端进阶" class="dropdown-title"><span class="title">前端进阶</span> <span class="arrow down"></span></button> <button type="button" aria-label="前端进阶" class="mobile-dropdown-title"><span class="title">前端进阶</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
WebRTC
</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/fontendAdvance/WebRTC/web_rtc_1.html" class="nav-link">
WebRTC基础
</a></li></ul></li><li class="dropdown-item"><h4>
前端可视化
</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/fontendAdvance/svg/svg_1.html" class="nav-link">
SVG
</a></li><li class="dropdown-subitem"><a href="/fontendAdvance/echarts/echarts_1.html" class="nav-link">
ECharts
</a></li><li class="dropdown-subitem"><a href="/fontendAdvance/handsontable/handsontable_1.html" class="nav-link">
Handsontable
</a></li></ul></li><li class="dropdown-item"><h4>
前端工程化
</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/fontendAdvance/pack_base/rollup&webpack.html" class="nav-link">
打包基础
</a></li><li class="dropdown-subitem"><a href="/fontendAdvance/webpack/webpack.html" class="nav-link">
webpack
</a></li><li class="dropdown-subitem"><a href="/fontendAdvance/vite/vite.html" class="nav-link">
vite
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="后端" class="dropdown-title"><span class="title">后端</span> <span class="arrow down"></span></button> <button type="button" aria-label="后端" class="mobile-dropdown-title"><span class="title">后端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/backend/nodejs/node.html" class="nav-link">
Nodejs
</a></li><li class="dropdown-item"><!----> <a href="/backend/mysql/mysql_note.html" class="nav-link">
MySql
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="其他" class="dropdown-title"><span class="title">其他</span> <span class="arrow down"></span></button> <button type="button" aria-label="其他" class="mobile-dropdown-title"><span class="title">其他</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/other/git/Git.html" class="nav-link">
Git
</a></li><li class="dropdown-item"><!----> <a href="/other/reg/reg.html" class="nav-link">
正则表达式
</a></li><li class="dropdown-item"><!----> <a href="/other/python/crawler.html" class="nav-link">
Python
</a></li></ul></div></div> <a href="https://github.com/fanwww/myweb" target="_blank" rel="noopener noreferrer" class="repo-link">
Github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/resources/website/websites_recom.html" class="nav-link">
Resources
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><span class="title">前端</span> <span class="arrow down"></span></button> <button type="button" aria-label="前端" class="mobile-dropdown-title"><span class="title">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
基础
</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/notes/html&css/form.html" class="nav-link">
HTML&CSS
</a></li><li class="dropdown-subitem"><a href="/notes/js/js_1.html" class="nav-link">
JavaScript
</a></li></ul></li><li class="dropdown-item"><h4>
入门
</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/notes/es6/es6.html" class="nav-link">
ES6
</a></li><li class="dropdown-subitem"><a href="/notes/sass/about.html" class="nav-link">
Sass
</a></li><li class="dropdown-subitem"><a href="/notes/ts/ts_install.html" class="nav-link">
TypeScript
</a></li><li class="dropdown-subitem"><a href="/notes/axios/axios.html" class="nav-link">
axios
</a></li></ul></li><li class="dropdown-item"><h4>
框架
</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/notes/vue/vue.html" class="nav-link">
Vue
</a></li><li class="dropdown-subitem"><a href="/notes/react/react_base.html" class="nav-link">
React
</a></li></ul></li><li class="dropdown-item"><h4>
其他
</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/notes/wx_mini_p/life_cycle.html" class="nav-link">
微信小程序
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端进阶" class="dropdown-title"><span class="title">前端进阶</span> <span class="arrow down"></span></button> <button type="button" aria-label="前端进阶" class="mobile-dropdown-title"><span class="title">前端进阶</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
WebRTC
</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/fontendAdvance/WebRTC/web_rtc_1.html" class="nav-link">
WebRTC基础
</a></li></ul></li><li class="dropdown-item"><h4>
前端可视化
</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/fontendAdvance/svg/svg_1.html" class="nav-link">
SVG
</a></li><li class="dropdown-subitem"><a href="/fontendAdvance/echarts/echarts_1.html" class="nav-link">
ECharts
</a></li><li class="dropdown-subitem"><a href="/fontendAdvance/handsontable/handsontable_1.html" class="nav-link">
Handsontable
</a></li></ul></li><li class="dropdown-item"><h4>
前端工程化
</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/fontendAdvance/pack_base/rollup&webpack.html" class="nav-link">
打包基础
</a></li><li class="dropdown-subitem"><a href="/fontendAdvance/webpack/webpack.html" class="nav-link">
webpack
</a></li><li class="dropdown-subitem"><a href="/fontendAdvance/vite/vite.html" class="nav-link">
vite
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="后端" class="dropdown-title"><span class="title">后端</span> <span class="arrow down"></span></button> <button type="button" aria-label="后端" class="mobile-dropdown-title"><span class="title">后端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/backend/nodejs/node.html" class="nav-link">
Nodejs
</a></li><li class="dropdown-item"><!----> <a href="/backend/mysql/mysql_note.html" class="nav-link">
MySql
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="其他" class="dropdown-title"><span class="title">其他</span> <span class="arrow down"></span></button> <button type="button" aria-label="其他" class="mobile-dropdown-title"><span class="title">其他</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/other/git/Git.html" class="nav-link">
Git
</a></li><li class="dropdown-item"><!----> <a href="/other/reg/reg.html" class="nav-link">
正则表达式
</a></li><li class="dropdown-item"><!----> <a href="/other/python/crawler.html" class="nav-link">
Python
</a></li></ul></div></div> <a href="https://github.com/fanwww/myweb" target="_blank" rel="noopener noreferrer" class="repo-link">
Github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><a href="/fontendAdvance/svg/svg_1.html" class="sidebar-link">一-入门指南</a></li><li><a href="/fontendAdvance/svg/svg_2.html" class="sidebar-link">二-坐标系统</a></li><li><a href="/fontendAdvance/svg/svg_3.html" class="sidebar-link">三-基本形状</a></li><li><a href="/fontendAdvance/svg/svg_4.html" class="sidebar-link">四-文档结构</a></li><li><a href="/fontendAdvance/svg/svg_5.html" class="sidebar-link">五-坐标系转换</a></li><li><a href="/fontendAdvance/svg/svg_6.html" class="sidebar-link">六-路径-<path></a></li><li><a href="/fontendAdvance/svg/svg_7.html" class="sidebar-link">七-图案渐变填充</a></li><li><a href="/fontendAdvance/svg/svg_8.html" class="sidebar-link">八-文本</a></li><li><a href="/fontendAdvance/svg/svg_9.html" class="sidebar-link">九-裁剪和蒙版</a></li><li><a href="/fontendAdvance/svg/svg_10.html" class="sidebar-link">十-滤镜</a></li><li><a href="/fontendAdvance/svg/svg_11.html" aria-current="page" class="active sidebar-link">十一-动画</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/fontendAdvance/svg/svg_11.html#svg中的动画" class="sidebar-link">SVG中的动画</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/fontendAdvance/svg/svg_11.html#set" class="sidebar-link">set</a></li><li class="sidebar-sub-header"><a href="/fontendAdvance/svg/svg_11.html#animate" class="sidebar-link">animate</a></li><li class="sidebar-sub-header"><a href="/fontendAdvance/svg/svg_11.html#animatetransform" class="sidebar-link">animateTransform</a></li><li class="sidebar-sub-header"><a href="/fontendAdvance/svg/svg_11.html#animatemotion" class="sidebar-link">animateMotion</a></li></ul></li><li class="sidebar-sub-header"><a href="/fontendAdvance/svg/svg_11.html#css操作svg动画" class="sidebar-link">CSS操作SVG动画</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/fontendAdvance/svg/svg_11.html#简单使用" class="sidebar-link">简单使用</a></li><li class="sidebar-sub-header"><a href="/fontendAdvance/svg/svg_11.html#时钟动画" class="sidebar-link">时钟动画</a></li></ul></li><li class="sidebar-sub-header"><a href="/fontendAdvance/svg/svg_11.html#总结" class="sidebar-link">总结</a></li></ul></li><li><a href="/fontendAdvance/svg/svg_12.html" class="sidebar-link">十二-路径描边动画</a></li><li><a href="/fontendAdvance/svg/svg_13.html" class="sidebar-link">十三-使用GSAP制作动画</a></li><li><a href="/fontendAdvance/svg/svg_14.html" class="sidebar-link">十四-为静态SVG添加动画</a></li><li><a href="/fontendAdvance/svg/svg_15.html" class="sidebar-link">十五-绘制闪烁边框</a></li><li><a href="/fontendAdvance/svg/svg_16.html" class="sidebar-link">十六-创建形变动画</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="学习svg-十一-动画"><a href="#学习svg-十一-动画" class="header-anchor">#</a> 学习SVG（十一）动画</h1> <h2 id="svg中的动画"><a href="#svg中的动画" class="header-anchor">#</a> SVG中的动画</h2> <ul><li>在SVG中动画是根据SMIL规范来进行开发的。</li> <li>SVG中有4个动画元素：</li></ul> <ol><li><code>set</code> 实现延迟功能。在规定时间之后，修改某个属性的值。</li> <li><code>animate</code> 实现单属性的过渡动画。</li> <li><code>animateTransform</code> 用于实现<code>transform</code>变换动画。</li> <li><code>animateMotion</code> 实现路径动画，让SVG各个图形，沿着指定路径运动。</li></ol> <h3 id="set"><a href="#set" class="header-anchor">#</a> set</h3> <ul><li>常用属性：</li></ul> <ol><li><code>attributeName</code> 属性名称。</li> <li><code>attributeType</code> 属性类型，参数 <code>CSS/XML/auto</code>。默认值auto。</li> <li><code>to</code> 变化到的值。</li> <li><code>begin</code> 延迟时间。</li></ol> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>circle</span> <span class="token attr-name">cx</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">cy</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">r</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>green<span class="token punctuation">"</span></span> <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>set</span> <span class="token attr-name">attributeName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cx<span class="token punctuation">"</span></span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>160<span class="token punctuation">"</span></span> <span class="token attr-name">begin</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2s<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>circle</span><span class="token punctuation">></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><img src="data:image/gif;base64,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" alt="1.gif"></p> <h3 id="animate"><a href="#animate" class="header-anchor">#</a> animate</h3> <ul><li>常用属性：</li></ul> <ol><li><code>attributeName</code> 属性名称。</li> <li><code>attributeType</code> 属性类型，参数 <code>CSS/XML/auto</code>。默认值auto。</li> <li><code>from</code> 属性开始值。</li> <li><code>to</code> 属性结束值。</li> <li><code>dur</code> 动画过渡时间。</li> <li><code>repeatCount</code> 动画重复次数。设置为 indefinite 表示无限循环，一直执行。</li> <li><code>fill</code> 动画结束后，freeze表示冻结，remove表示恢复。</li></ol> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rect</span> <span class="token attr-name">x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">y</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>200<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>200<span class="token punctuation">"</span></span> <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>green<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>animate</span> <span class="token attr-name">attributeName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width<span class="token punctuation">"</span></span> <span class="token attr-name">attributeType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>XML<span class="token punctuation">"</span></span> <span class="token attr-name">from</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>200<span class="token punctuation">"</span></span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>20<span class="token punctuation">"</span></span> <span class="token attr-name">dur</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5s<span class="token punctuation">"</span></span> <span class="token attr-name">repeatCount</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>animate</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rect</span><span class="token punctuation">></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><img src="data:image/gif;base64,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" alt="2.gif"></p> <h3 id="animatetransform"><a href="#animatetransform" class="header-anchor">#</a> animateTransform</h3> <ul><li>常用属性：</li></ul> <ol><li><code>attributeName</code> 属性名称。</li> <li><code>attributeType</code> 属性类型，参数 <code>CSS/XML/auto</code>。默认值auto。</li> <li><code>repeatCount</code> 动画重复次数。</li> <li><code>type</code> <code>transform</code>变换类型。</li></ol> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rect</span> <span class="token attr-name">x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>-10<span class="token punctuation">"</span></span> <span class="token attr-name">y</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>-10<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>40<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>40<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ff9<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>animateTransform</span>
<span class="token attr-name">attributeType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>XML<span class="token punctuation">"</span></span>
<span class="token attr-name">attributeName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>transform<span class="token punctuation">"</span></span>
<span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>scale<span class="token punctuation">"</span></span>
<span class="token attr-name">from</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span>
<span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span>
<span class="token attr-name">dur</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3s<span class="token punctuation">"</span></span>
<span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>freeze<span class="token punctuation">"</span></span>
<span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>animateTransform</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rect</span><span class="token punctuation">></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p><img src="/assets/img/svg_11_3.6a0a9059.gif" alt="3.gif"></p> <h3 id="animatemotion"><a href="#animatemotion" class="header-anchor">#</a> animateMotion</h3> <ul><li>常用属性：</li></ul> <ol><li><code>attributeName</code> 属性名称。</li> <li><code>attributeType</code> 属性类型，参数 <code>CSS/XML/auto</code>。默认值auto。</li> <li><code>path</code> 定义路径。</li> <li><code>dur</code> 动画过渡时间。</li></ol> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>circle</span> <span class="token attr-name">cx</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">cy</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">r</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>15<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>green<span class="token punctuation">"</span></span> <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>animateMotion</span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>M50,135C100,25 150,225 200,125<span class="token punctuation">"</span></span> <span class="token attr-name">dur</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>6s<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>freeze<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>animateMotion</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>circle</span><span class="token punctuation">></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><img src="/assets/img/svg_11_4.e007a4bd.gif" alt="4.gif"></p> <h2 id="css操作svg动画"><a href="#css操作svg动画" class="header-anchor">#</a> CSS操作SVG动画</h2> <ul><li>在内联模式下，<code>SVG元素</code>作为<code>html</code>标签。直接成为DOM的一部分，我们就能使用CSS直接控制。</li></ul> <h3 id="简单使用"><a href="#简单使用" class="header-anchor">#</a> 简单使用</h3> <div class="language-html line-numbers-mode"><pre class="language-html"><code>...
#cir {
fill: gold;
}
#cir:hover {
fill: greenyellow;
}
...
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>circle</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cir<span class="token punctuation">"</span></span> <span class="token attr-name">cx</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">cy</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">r</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>green<span class="token punctuation">"</span></span> <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>circle</span><span class="token punctuation">></span></span>
...
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p><img src="/assets/img/svg_11_5.722cb8b6.gif" alt="6.gif"></p> <h3 id="时钟动画"><a href="#时钟动画" class="header-anchor">#</a> 时钟动画</h3> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">.fast-line</span> <span class="token punctuation">{</span>
<span class="token property">animation</span><span class="token punctuation">:</span> rotateName 2s linear infinite<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.slow-line</span> <span class="token punctuation">{</span>
<span class="token property">animation</span><span class="token punctuation">:</span> rotateName 15s linear infinite<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token atrule"><span class="token rule">@keyframes</span> rotateName</span> <span class="token punctuation">{</span>
<span class="token selector">0%</span> <span class="token punctuation">{</span>
<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">100%</span> <span class="token punctuation">{</span>
<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
...
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>-52 -52 104 104<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>circle</span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span> <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#DE3E35<span class="token punctuation">"</span></span> <span class="token attr-name">stroke-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>6<span class="token punctuation">"</span></span> <span class="token attr-name">stroke-miterlimit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">cx</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">cy</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">r</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>48<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>line</span>
<span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fast-line<span class="token punctuation">"</span></span>
<span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span>
<span class="token attr-name">stroke-linecap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>round<span class="token punctuation">"</span></span>
<span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#DE3E35<span class="token punctuation">"</span></span>
<span class="token attr-name">stroke-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>6<span class="token punctuation">"</span></span>
<span class="token attr-name">stroke-miterlimit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span>
<span class="token attr-name">x1</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span>
<span class="token attr-name">y1</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span>
<span class="token attr-name">x2</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>35<span class="token punctuation">"</span></span>
<span class="token attr-name">y2</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span>
<span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>line</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>line</span>
<span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>slow-line<span class="token punctuation">"</span></span>
<span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span>
<span class="token attr-name">stroke-linecap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>round<span class="token punctuation">"</span></span>
<span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#DE3E35<span class="token punctuation">"</span></span>
<span class="token attr-name">stroke-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>6<span class="token punctuation">"</span></span>
<span class="token attr-name">stroke-miterlimit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span>
<span class="token attr-name">x1</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span>
<span class="token attr-name">y1</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span>
<span class="token attr-name">x2</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span>
<span class="token attr-name">y2</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>24<span class="token punctuation">"</span></span>
<span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>line</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br></div></div><p><img src="/assets/img/svg_11_6.1501ad40.gif" alt="1.gif"></p> <ol><li>先创建一个静态的时钟。这里要注意使用了<code>viewBox</code>修改了可视区位置，因为SVG的旋转是整个坐标系旋转，所以已坐标原点为中心进行绘制。</li> <li>SVG元素也在DOM中，使用类选择器选中<code>line</code>元素。</li> <li>开始使用CSS的动画属性<code>animation</code>。不断的修改<code>line</code>元素的<code>rotate</code>角度，完成长短针的旋转。</li></ol> <h2 id="总结"><a href="#总结" class="header-anchor">#</a> 总结</h2> <p>本文主要了解了SVG的动画和结合CSS实现动画。除了CSS实现动画，通过JavaScript也能实现动画。当然需要分析一下动画的复杂度，简单的动画完全没必要使用JavaScript。</p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">2/25/2023, 5:42:58 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/fontendAdvance/svg/svg_10.html" class="prev">
十-滤镜
</a></span> <span class="next"><a href="/fontendAdvance/svg/svg_12.html">
十二-路径描边动画
</a>
→
</span></p></div> </main></div><div class="global-ui"><div id="goTop" class="hide-cat" data-v-bf92849a></div><div id="live2d-widget" class="live2d-widget-container" style="position:fixed;right:65px;bottom:0px;width:270px;height:300px;z-index:99999;opacity:0.8;pointer-events:none;"><canvas id="live2d_canvas" width="270" height="300" class="live2d_canvas" style="position:absolute;left:0px;top:0px;width:270px;height:300px;"></canvas></div></div></div>
<script src="/assets/js/app.468d81f0.js" defer></script><script src="/assets/js/3.98f38222.js" defer></script><script src="/assets/js/11.a07021ac.js" defer></script>
</body>
</html>