├── README.md
├── html
└── index.html
└── static
├── css
├── index.css
└── reset.css
├── images
├── 1.gif
├── 2.gif
├── 3.gif
├── 4.gif
└── test.jpg
└── js
├── index.js
└── jquery-1.8.0.min.js
/README.md:
--------------------------------------------------------------------------------
1 | # SVG 奇思妙想
2 | 使用 `SVG` 标签或是CSS属性 `clip-path` 创建的图形
3 |
4 | | Demo link | Description |
5 | | ------| ------ |
6 | | [SVG奇思妙想](http://chokcoco.github.io/demo/svg/html/index.html) | 使用 `SVG` or `clip-path` 创建的图形 |
7 | | [CSS奇思妙想](http://chokcoco.github.io/magicCss/html/index.html) | CSS3奇思妙想,单标签实现各类图形 |
8 |
9 | 由于部分图形使用了 `clip-path` ,兼容性问题,请使用 Chrome 浏览器浏览。
10 |
11 | ## 使用`svg` 绘制各类统计图形
12 |
13 | 使用 svg 标签绘制各类百分比图、饼图、loading 图。
14 |
15 | #### loading 图
16 | 
17 |
18 | #### 饼图
19 | 
20 |
21 | #### 百分比图
22 | 
23 |
24 | 
25 |
26 | ## License
27 | MIT
28 |
--------------------------------------------------------------------------------
/html/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
24 |
25 |
26 |
27 | 圆形
28 |
29 |
30 |
31 |
32 |
48 |
49 |
50 |
51 |
52 |
53 |
SVG多边形
54 |
hover、active 可变换效果
55 |
56 |
63 |
64 |
65 |
93 |
94 |
95 |
96 |
97 |
98 |
SVG多边形自由切换动画
99 |
SVG动画的前提是,确定最终形状的点的数目,必须和初始形状的点的数目一样
100 |
101 |
108 |
109 |
110 |
190 |
191 |
192 |
193 |
194 |
195 | 气泡对话框
196 |
197 |
198 |
199 |
200 |
217 |
218 |
219 |
220 |
221 |
222 | Close icon
223 |
224 |
225 |
226 |
227 |
244 |
245 |
246 |
247 |
248 |
249 | star
250 |
251 |
252 |
253 |
254 |
270 |
271 |
272 |
273 |
274 |
275 |
triangle2rect
276 |
clip-path 图形
277 |
278 |
279 |
280 |
281 |
282 |
283 |
284 |
376 |
377 |
378 |
379 |
380 |
381 |
使用 SVG PATH 绘制的矩形
382 |
使用审查元素看看 html 结构,绘画内容在 svg 标签内
383 |
384 |
387 |
388 |
389 |
399 |
400 |
401 |
402 |
403 |
404 |
使用 SVG PATH 绘制平滑曲线
405 |
使用审查元素看看 html 结构,绘画内容在 svg 标签内
406 |
本曲线使用二次贝塞尔曲线生成
407 |
408 |
411 |
412 |
413 |
423 |
424 |
425 |
426 |
427 |
428 |
使用 SVG PATH 绘制平滑曲线
429 |
使用审查元素看看 html 结构,绘画内容在 svg 标签内
430 |
本曲线使用三次贝塞尔曲线生成
431 |
432 |
435 |
436 |
437 |
447 |
448 |
449 |
450 |
451 |
452 |
使用 SVG PATH 绘制平滑曲线,用于文字效果
453 |
使用审查元素看看 html 结构,绘画内容在 svg 标签内
454 |
可以让文字跟随 SVG 路径做出各种形状
455 |
456 |
468 |
469 |
470 |
488 |
489 |
490 |
491 |
492 |
493 |
使用 SVG 绘制的文字阴影效果
494 |
使用审查元素看看 html 结构,绘画内容及滤镜定义在 svg 标签内
495 |
运用了大量 SVG 滤镜
496 |
497 |
515 |
516 |
517 |
531 |
532 |
533 |
534 |
535 |
536 |
使用 SVG 绘制的文字故障效果
537 |
使用审查元素看看 html 结构,绘画内容及滤镜定义在 svg 标签内
538 |
运用了大量 SVG 滤镜
539 |
540 |
599 |
600 |
601 |
618 |
619 |
620 |
621 |
622 |
623 |
使用 SVG 绘制的文字在水下的效果(textUnderWater)
624 |
使用审查元素看看 html 结构,绘画内容及滤镜定义在 svg 标签内
625 |
运用了大量 SVG 滤镜
626 |
627 |
641 |
642 |
643 |
659 |
660 |
661 |
662 |
663 |
664 |
使用 SVG stroke 虚线效果,绘制文字边框动画
665 |
使用审查元素看看 html 结构,绘画内容在 svg 标签内
666 |
改变 SVG 元素的虚线效果生成补间动画
667 |
668 |
671 | HOVER ME
672 |
673 |
674 |
724 |
725 |
726 |
727 |
728 |
729 |
使用 SVG stroke 虚线效果,绘制的线条动画
730 |
使用审查元素看看 html 结构,绘画内容在 svg 标签内
731 |
732 |
735 |
738 |
741 |
742 |
743 |
878 |
879 |
880 |
881 |
882 |
883 | 使用 SVG stroke 虚线效果,绘制的线条动画
884 | 绘画内容在 svg 标签内(刷新查看动画)
885 |
886 |
896 |
897 |
898 |
961 |
962 |
963 |
964 |
965 |
966 | 使用 SVG stroke 虚线效果,绘制 loading 图
967 | 使用审查元素看看 html 结构,绘画内容在 svg 标签内
968 | 改变 SVG 元素的虚线效果生成补间动画
969 |
970 |
974 |
975 |
976 |
996 |
997 |
998 |
999 |
1000 |
1001 |
使用 SVG PATH 绘制饼图
1002 |
使用审查元素看看 html 结构,绘画内容在 svg 标签内
1003 |
点击饼图查看动画过渡效果!
1004 |
1005 | 75%
1006 |
1010 |
1011 |
1012 |
1033 |
1111 |
1112 |
1113 |
1114 |
1115 |
1116 |
使用 SVG 绘制百分比图
1117 |
使用审查元素看看 html 结构,绘画内容在 svg 标签内
1118 |
使用了 SVG 动画 animate
1119 |
1120 |
1139 |
1140 |
1141 |
1151 |
1152 |
1153 |
1154 |
1155 |
1156 |
使用 SVG 绘制可调节数值百分比图
1157 |
使用审查元素看看 html 结构,绘画内容在 svg 标签内
1158 |
使用原生JS控制svg百分比,并生成动画,刷新页面观看动画
1159 |
1160 |
1171 |
1172 |
1173 |
1183 |
1253 |
1254 |
1255 |
1256 |
1257 |
1258 |
使用 SVG 绘制莲花图
1259 |
使用审查元素看看 html 结构,绘画内容在 svg 标签内
1260 |
1261 |
1269 |
1270 |
1271 |
1281 |
1297 |
1298 |
1299 |
1300 |
1301 |
1302 |
使用 SVG 绘制风车
1303 |
使用审查元素看看 html 结构,绘画内容在 svg 标签内
1304 |
1305 |
1313 |
1314 |
1315 |
1325 |
1341 |
1342 |
1343 |
1344 |
1345 |
1346 |
使用 SVG 绘制 360 极速浏览器图标
1347 |
使用审查元素看看 html 结构,绘画内容在 svg 标签内
1348 |
1349 |
1355 |
1356 |
1357 |
1367 |
1390 |
1391 |
1392 |
1393 |