<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 SVG 世界地图和飞机飞行路线图动画</title>
<style>
.wrapper {
width: 685px;
margin: 0 auto;
position: absolute;
}
.animated-plane {
width: 38px;
height: 34px;
position: absolute;
top: 28px;
left: 35px;
z-index: 9999;
}
#route {
position: absolute;
top: 45px;
left: 55px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="animated-plane" id="js-animated-plane">
<svg version="1.1" id="plane" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="38px" height="34px" viewBox="0 0 38 34" enable-background="new 0 0 38 34" xml:space="preserve">
<path fill="#67C6DA" d="M36.5,15.9c-0.4-0.4-1-0.7-1.6-0.8L31.1,15l-6.3-0.3L14.6,0.4l-3.3-0.2l3.8,13.9l-8-0.4L2.6,8.1L0.9,8
l0.1,0.6l-0.3,0l1.7,6.9l0.2,1.2l-0.3,1.1L0,24.6l0.3,0l-0.2,0.6l1.7,0.1L6.9,20l8,0.3L9.8,33.9l3.3,0.1l11.4-13.4l6.3,0.3l3.7,0.2
c0.7,0,1.2-0.2,1.7-0.6c0.6-0.5,1.1-1.3,1.1-2.1c0,0,0-0.1,0-0.1c0,0,0-0.1,0-0.1C37.4,17.3,37.1,16.5,36.5,15.9z" />
</svg>
</div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="684.3px" height="320.6px" viewBox="0 0 684.3 320.6" enable-background="new 0 0 684.3 320.6" xml:space="preserve">
<g id="background">
</g>
<g id="west">
<g>
<g>
<polygon fill="#52524F" points="559.2,198.1 548.3,198.4 547.9,192.5 549.6,193.2 553.9,192.8 553.5,187.3 541.7,187.5
538.5,183.2 538.6,181 523.5,167.3 519.8,170.2 541.4,196.7 544.5,197.8 544.5,199.2 540.4,199.2 541.4,202.5 568.1,203.7 " />
<polygon fill="#52524F" points="576.3,184.2 578.1,183 578.1,168.5 576.3,167.7 575.4,163.2 572.8,163.2 571.1,167.8 569,169.6
553.6,177.9 553.6,186.2 558.8,193 571.7,193 573.4,188.8 576.3,186.1 " />
<polygon fill="#52524F" points="587.7,183 579.9,186 580,187.8 578.1,187.8 578.1,198.5 582.1,198.5 581.5,191.7 584.6,192.8
584.6,197.6 587.8,197.4 " />
<polygon fill="#52524F" points="651.1,239.5 643.2,232.7 642.6,219.8 637.4,210.8 632.7,210.6 630.8,226.8 621.8,226.2
619.3,224.6 618.9,218.2 623.7,219.2 627.7,215.3 619.2,210.1 609.1,210.1 601.9,220.4 599,220.4 599,217.1 590.3,217.8
576.6,233.4 569.4,233.5 561.3,239.1 560.7,263.2 555.8,267.9 555.8,272.2 579.4,264.1 598.5,263.3 605.6,278.9 627.2,279.6
648.1,260 653.3,248.2 " />
<polygon fill="#52524F" points="608.4,290.8 616.1,291.7 622.3,288.3 622.4,283.6 615.6,282.9 " />
<polygon fill="#52524F" points="682.1,269.6 678.9,270.3 678.8,263 673,263.4 672.2,274.7 667.1,278.2 657.5,279.5 642.2,290.4
639.6,292.5 639.6,296.2 647.6,295 667,283 672.5,279.4 678.4,276.8 684.3,273.5 " />
<polygon fill="#52524F" points="621.9,189.2 617,189.4 617.4,184.2 612.7,181.4 606,188.1 610.5,193.7 620.2,195.1 625.6,197.9
625.8,200.6 622.2,200.6 622.4,206 634.1,205.3 638.4,200.7 643,200.3 643,208.7 650.9,208.7 650.9,205.3 646.9,205.3
646.2,195.1 627.2,186.4 " />
<polygon fill="#52524F" points="480.6,164.8 482.4,169.8 489.1,167.3 489.9,160.4 484.5,159.3 " />
<polygon fill="#52524F" points="402,223.1 392.9,221.9 392.9,229 396.1,232.8 393.6,236.6 389.9,240.9 389.9,248.7 395,253.6
399.5,246.2 408.5,233.1 412.8,212.5 407.3,212.5 " />
<polygon fill="#52524F" points="589.7,201.3 586.7,201.3 586.7,202.9 589,203.7 " />
<rect x="572.8" y="203.7" fill="#52524F" width="3.5" height="2" />
<polygon fill="#52524F" points="581.4,205.6 583.6,205.6 583.6,203.9 585.2,203.7 585.2,202 581.7,202 580.2,203.7 578.1,205.6
578.1,207.3 581.4,207 " />
<polygon fill="#52524F" points="590.4,207.2 594,207.2 594,205.3 596.4,205.6 596.1,202.5 592.1,203.1 591.7,205.1 587.2,205.6
587,205.6 587,208.7 590.4,208.7 " />
<path fill="#52524F" d="M46.4,53.6l0.7-4.7l-4.8-0.7c0,0.3,0.4,5.4,0.7,5.4C43.4,53.6,46.4,53.6,46.4,53.6z" />
<polygon fill="#52524F" points="286.8,49.2 287.1,52 282.8,52.9 282.3,59 287.4,59 294.3,58.4 297.8,54.2 294,52.7 292,50.3
288.9,45.3 287.4,38.3 281.6,39.4 280,41.9 280,44.8 282.8,46.7 " />
<polygon fill="#52524F" points="281.8,51.5 282.1,47.7 278.7,46.2 273.9,47.3 270.4,53 270.4,56.7 274.5,56.7 " />
<path fill="#52524F" d="M526.2,163.4l21,20.1l1.1-3.5l-17-24.3l1.8-7.1l9,10.2l5,0.5l6.6-4.4l-1.1-6.6l-10.9-8.8l-0.4-7.9
l3.1-4.2l5.5,1.8l-0.4,3.8l3.1,4.8l2.8-2l-1.5-5.7l15.5-5.5l6.8-5.7l-1-10.2l-13.5-14.1L561.3,83h6l18.6,14.1l5.2-1.4l-3.4-4.6
l-9.9-6l0.6-9l11.8,0l1-11.1l-4.5-5.9l2.6-2.9l5.7,5.7l1.8-2.4l-7.3-8.4L571,49l-2.4-4.9l5.3-7.5l4.2,3.1l12.6,1.1l15.9-10.6
l2.6,3.3l-3.5,5.5v5.5l14.6,11.9l4.6-2.4l-1.8-8l-10.4-9.7l13.7-0.9v-4l6.6-1.3l-5.1-3.5l0.2-2.7l13.9,2.3l2.6-2.3L626,16.1
l-68.5-3.5l-6.4-3.3L541,7.8l-7.6-0.3l-6.9,7l-2.9-0.2l-9.2-6.9h-27.2L474.5,0l-25.2,1.6l-19.2,8.6l0.1,9.9l-5.9,1.8l-1.3-9.9
l-2.2-3.4l-6.6-1.6l-1.5,6l2,4.9l-23.5-1.5l-11.2,5.2l-1.7-4.9l-2.8,0.7l-2.1,5.5l-5.9,4.6l-14.4-0.4l-0.7-3.2l15-0.7l3.1-2.6
l-18.1-8.4l-22.1,0.7L318,18.9l-4.6,8.3l-8.2,3.2l-3.4,3.8l0.8,4.3l4.2,0.6l2.6,6.4l7.3-2.9l1.2,8.5h-2.2l-6-0.9l-6.6,1.1
l-6.4,9.1l-9.2,1.4l-1.3,7.8l3.9,0.9l-1.1,5l-9.1-1.8l-8.3,1.8l-1.8,4.7l1.4,9.7l4.9,2.3l8.2,0l5.5-0.5l1.7-4.4l8.7-11.3l5.7,1.2
l5.6-5.1l1.1,4l13.8,9.3l-1.7,2.3l-6.2-0.3l2.4,3.4l3.8,0.9l4.5-1.9l-0.1-5.4l2-1l-1.6-1.7l-9.2-5.1l-2.4-6.8h7.7l2.4,2.4
l6.6,5.7l0.3,6.9l6.8,7.3l2.5-10l4.7-2.6l0.9,8.2l4.6,5.1l14-0.2l4.1,3.1v7.3l-5.1,4.6h-14.1l-8.6-6.4l-9.1,0.9v5.5h-2.9
l-3.1-2.2l-15.7-4V91l-19.9,1.5l-6.2,3.3H280l-3.9-0.4l-9.6,5.3v10L247,124.9l1.6,6h4l-1,5.7l-2.8,1l-0.1,15l16.9,19.3h7.4
l0.4-1.2h13.2l3.8-3.5h7.5l4.1,4.1l11.2,1.2l-1.5,14.9l12.4,21.9l-6.6,12.5l0.4,5.9l5.2,5.1v14.2l6.8,9.1V268h20l15-15.5l4.7-8.4
l6-1.3v-7.1l4-4.7l8.4-11.5l-1.8-17.5l-3.7-6.5l16.5-15.8l18.2-26l-3.5-1.6l-18.9,4l-4.9-2.4l-19.9-37.4l1.4-1.6l19.7,23.9
l0.5,7.4l4.6,4.6l9.3-0.6l19.4-14l6.1-4l-0.1-4.9l-6.5-0.8c0,0-22.7-10.7-22.7-11.2c0-0.5,0.1-9.2,0.1-9.2h5l0.7,6.3l10.5,6
l12,0.6l26.1,4.3l6.1,3.8v6l-0.8,8.1l13.3,22l4.3,1l4.3-6.2L486,140l4.5-9.6l7.2-2.7l12.7,1.2l15.9,14.1V163.4z M343,23.6
l-8.8,5.4v3.5l5,2.3l0.3,4.8l-7,10.4l-12.1-0.1l-0.8-2.5l7.6-3.9l0.1-14.4l12.9-9h2.8V23.6z M370,85l-11.5-0.5l-3.4,0.5v-7.8
l2.6-2.9l2.8-0.9l6.1-0.7l1.3-2.1l2.5,1.2l0.4,7.1l6.7,2.7L378,85H370z M414,90.6l-2,1.9l-4.7-0.4l-0.9-1.4l-7.3-0.5l0.5-2.4
l3.8-3.3v-2.8l-7.4-5.4l-0.3-6.8l1.5-3.4l6-0.5l5.1,2.1l0.2,3.5l-7.2-0.4l-0.4,3.3l9.1,6v4.4l3.9,2.9V90.6z" />
<path fill="#52524F" d="M182.7,70.5h-5.1v2.6h1.2c0,0,0.1,0.6,0.2,1.3l3.1-0.3l1.9-1.2l0.5-2.4l2.5-0.2l1-2.1l-2.3-0.5l-2,0.1
L182.7,70.5z" />
<polygon fill="#52524F" points="170.5,75.1 174.2,74.8 174.5,72.2 172.3,70.5 170.7,72.5 " />
<path fill="#52524F" d="M218.9,188.6l-15.6-0.1l-12.4-4.7l-0.6-8.8l-4.1-7.2l-11.2-0.1l-6.5-10.2l-5.7-2.8l-0.3,3.1l-10.5,0.6
l-3.8-5.3l-10.9-2.2l-9,10.4l-14.1-2.4l-1-15.9l-10.3-1.8l4.1-7.8l-1.2-4.5l-13.5,9.1l-8.5-1l-3-6.7l1.9-6.9l4.7-8.7l10.8-5.5
l20.9,0l-0.1,6.4l7.5,3.5l-0.6-10.9l5.4-5.5l10.9-7.2l0.7-5.1l10.9-11.3l11.6-6.4l-1-0.8l7.8-7.4l2.9,0.8l1.3,1.7l3-3.3l0.7-0.3
l-3.3-0.4l-3.3-1.1v-3.2l1.8-1.4h3.9l1.8,0.8l1.5,3.1l1.9-0.3v-0.3l0.5,0.2l5.4-0.8l0.8-2.7l3.1,0.8v2.9l-2.9,2h0l0.4,3.2l9.8,3
c0,0,0,0,0,0.1l2.3-0.2l0.2-4.3l-7.8-3.5l-0.4-2.1l6.5-2.2l0.3-6.2l-6.8-4.1L19
HTML5 SVG实现的世界地图和飞机飞行路线图动画效果源码.zip
版权申诉
151 浏览量
2022-11-03
23:38:16
上传
评论
收藏 38KB ZIP 举报
HTML5 SVG实现的世界地图和飞机飞行路线图动画效果源码.zip （3个子文件） 
132686862624613801 
index.html 15KB js 
jquery.min.js 82KB tween.min.js 6KB资源评论
毕业_设计
- 粉丝: 1934
- 资源: 1万+
最新资源
- 批量word文件内容替换工具1.0 (批量实现多个 Word 文档文件文字替换利器).exe
- Cartoon GUI Pack 1.2.zip
- 【数据集和代码】基于加速度传感器的步态识别行人分类实验（可做步态识别）
- 我分享个魔兽内存修改器
- Python毕业设计基于Django的网易云数据分析可视化大屏系统的设计与实现+使用说明+全部资料（优秀项目）.zip
- mp3 idv2，idv1，frame分析工具
- Python毕业设计基于Django的网易云数据分析可视化大屏系统的设计与实现+使用说明+全部资料（高分项目）.zip
- 人工兔优化算法ARO MATLAB源码， 应用案例为函数极值求解以及优化svm进行分类，代码注释详细，可结合自身需求进行应用
- 人才网站设计-asp.net+sql-（系统源码）
- asp.net+sql人才网站设计-含系统源码
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
