258 lines
32 KiB
HTML
258 lines
32 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>红军长征路线动画</title>
|
||
<style>
|
||
body {
|
||
margin: 0;
|
||
font-family: "Microsoft YaHei", sans-serif;
|
||
background: #f0f8ff;
|
||
}
|
||
|
||
h2 {
|
||
text-align: center;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
#map {
|
||
position: relative;
|
||
width: 1200px;
|
||
height: 840px;
|
||
margin: 0 auto;
|
||
border: 2px solid #333;
|
||
background: url("background.jpeg") no-repeat center/cover;
|
||
overflow: hidden;
|
||
}
|
||
|
||
svg {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
#redFlag {
|
||
width: 30px;
|
||
height: 30px;
|
||
background: url("hongqi.jpg") no-repeat center/contain;
|
||
position: absolute;
|
||
transform: translate(-50%, -50%); /* 使红旗中心对准路径 */
|
||
z-index: 10;
|
||
/* 添加备用背景样式，以防图片加载失败 */
|
||
background-color: red;
|
||
border-radius: 50% 0;
|
||
}
|
||
|
||
#subtitle {
|
||
text-align: center;
|
||
margin-top: 10px;
|
||
font-size: 16px;
|
||
height: 24px;
|
||
}
|
||
|
||
#controls {
|
||
text-align: center;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
button {
|
||
margin: 0 5px;
|
||
padding: 6px 12px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<h2>红军长征路线动画演示</h2>
|
||
|
||
<div id="map">
|
||
<svg viewBox="0 0 423.33332 296.3333">
|
||
<!-- 路线 -->
|
||
<path id="route"
|
||
d="m 215.41778,45.943321 c -0.21981,-0.109278 -0.42236,-0.264165 -0.65944,-0.327835 -0.0791,-0.02125 -0.14812,0.102698 -0.22891,0.08927 -0.26471,-0.04401 -0.50243,-0.193555 -0.76381,-0.254306 -0.17156,-0.03988 -0.352,-0.02114 -0.52643,-0.04557 -0.79616,-0.111511 -0.67475,-0.170516 -1.61594,-0.636749 -0.0785,0.03321 -0.15075,0.09028 -0.23546,0.09962 -0.34955,0.03857 -0.82153,-0.121862 -1.13428,-0.168976 -0.58727,-0.08847 -1.18935,-0.05386 -1.78043,-0.049 -0.20667,-0.0056 -0.43888,-0.116411 -0.62003,-0.01675 -0.11175,0.06148 0.0477,0.288732 -0.041,0.380436 -0.0963,0.0996 -0.2741,0.04465 -0.40716,0.08317 -0.10708,0.03099 -0.20166,0.09988 -0.31037,0.124515 -0.0984,0.02228 -0.6818,0.05273 -0.78572,0.05888 -0.529,0.09897 -1.06773,-0.06696 -1.59238,-0.0512 -0.2855,0.0086 -0.56304,0.09703 -0.84579,0.137498 -0.51999,0.04032 -0.78294,0.391385 -1.16478,0.668515 -0.11991,0.08702 -0.27433,0.122089 -0.3875,0.217697 -0.10048,0.08488 -0.16034,0.208544 -0.24051,0.312819 -0.11739,0.0861 -0.23477,0.172199 -0.35216,0.2583 -0.3851,0.137371 -0.69897,0.42609 -1.07857,0.573336 -0.6065,0.235254 -0.76066,0.0801 -1.24685,0.494371 -0.13912,0.118541 -0.21608,0.295691 -0.33882,0.431128 -0.14189,0.156586 -0.30226,0.295386 -0.45339,0.443079 -0.12529,0.160028 -0.29222,0.29486 -0.37588,0.480087 -0.082,0.181422 -0.0587,0.394385 -0.10639,0.58766 -0.49199,1.994348 0.17149,-0.987425 -0.44661,1.24386 -0.13289,0.479716 -0.18293,0.979122 -0.30111,1.462669 -0.002,0.241536 0.0243,0.484796 -0.005,0.724609 -0.0269,0.223896 -0.26161,0.932 -0.30969,1.166323 -0.12293,0.599136 -0.0564,1.200002 -0.0649,1.806715 -0.001,0.06148 -0.0247,1.049626 -0.004,1.122683 0.0752,0.269552 0.33487,0.480018 0.35921,0.758801 0.0152,0.173964 -0.16974,0.305237 -0.25294,0.458764 -0.0914,0.16868 -0.15861,0.352277 -0.27091,0.507833 -0.13811,0.191302 -0.31649,0.350018 -0.47473,0.525026 -0.34862,1.291326 6e-5,0.227981 -0.55462,1.398929 -0.10148,0.214246 -0.11897,0.474358 -0.26788,0.658818 -0.16447,0.203729 -0.46035,0.266777 -0.63605,0.460904 -1.47121,1.625518 0.79793,-0.250388 -0.97325,1.118383 -0.3596,0.486482 -0.32294,0.589333 -0.93513,0.790244 -0.22793,0.07481 -0.50248,0.0024 -0.70877,0.124844 -0.14246,0.08456 -0.0902,0.360484 -0.2373,0.436705 -0.23515,0.121849 -0.53116,0.03383 -0.78885,0.09501 -0.22816,0.05416 -0.43877,0.165679 -0.65815,0.248517 -1.80031,0.588145 -3.64598,0.127135 -5.47514,-0.03667 -0.79745,0.01225 -1.58937,-0.315206 -2.38922,-0.187323 -0.25643,0.041 -0.87974,0.27808 -1.13103,0.396471 -0.0418,0.09458 -0.0237,0.264795 -0.12532,0.283741 -0.53259,0.09927 -0.83991,-0.364656 -1.38015,-0.146891 -0.1433,0.05776 -0.11378,0.319037 -0.25128,0.389483 -0.21882,0.112096 -0.48753,0.06598 -0.72891,0.112662 -0.236,0.04564 -0.46812,0.109405 -0.70218,0.164105 -1.23626,0.518687 0.0201,0.02944 -1.32351,0.433118 -0.21459,0.06447 -0.41449,0.175381 -0.6322,0.228391 -0.25328,0.06167 -0.53504,0.009 -0.77369,0.113927 -0.16024,0.07041 -0.22769,0.267364 -0.35854,0.383611 -0.13536,0.120256 -0.29117,0.215297 -0.43676,0.322948 -0.92261,0.7142 -2.03561,1.145217 -3.0575,1.706157 -0.17306,0.09547 -0.3363,0.211455 -0.51918,0.286422 -0.39864,0.163407 -0.85496,0.165685 -1.24391,0.350944 -0.79514,0.378719 -0.0268,0.209939 -0.66241,0.727181 -0.1562,0.127119 -0.36576,0.168682 -0.54864,0.253023 -0.129,0.112371 -0.26538,0.216787 -0.38699,0.337109 -0.37475,0.370765 -0.27874,0.410458 -0.73623,0.688482 -0.23151,0.140693 -0.52434,0.187773 -0.72212,0.372902 -0.18635,0.174426 -0.13903,0.590938 -0.38404,0.662476 -0.4938,0.144175 -1.02664,-0.06715 -1.53996,-0.100729 -0.0179,0.272127 0.14347,0.62801 -0.0537,0.816382 -0.24084,0.230042 -0.66175,0.08962 -0.98376,0.174628 -0.26079,0.06885 -0.52364,0.150289 -0.75731,0.285017 -0.0555,0.03199 -0.98705,0.862478 -0.99228,0.876657 -0.0816,0.221173 0.0334,0.470297 0.0501,0.705443 -0.37735,0.08338 -1.31094,0.102457 -1.43079,0.727033 -0.062,0.323 0.30421,0.654494 0.19955,0.96629 -0.0301,0.08972 -1.70452,1.014005 -1.87808,1.098761 -0.17823,0.136459 -0.36698,0.260173 -0.53469,0.409374 -0.16315,0.145156 -0.28381,0.335804 -0.45511,0.471239 -0.57017,0.450768 -1.28875,0.696987 -1.89025,1.094925 -0.19351,0.128022 -0.36117,0.291375 -0.54175,0.437063 -0.3691,0.602768 -0.73648,1.1763 -1.30419,1.61122 -0.18372,0.140745 -0.39853,0.238368 -0.57867,0.383664 -0.30874,0.249018 -0.56414,0.557752 -0.84877,0.834004 -0.72406,0.431964 -1.91316,0.666258 -2.40199,1.400736 -0.11092,0.166666 -0.17009,0.362487 -0.25513,0.543732 -0.3402,0.524028 -0.70592,0.986194 -0.93493,1.572424 -0.0718,0.183909 -0.0863,0.393165 -0.19064,0.560816 -0.0804,0.129257 -0.6716,0.619723 -0.79365,0.723958 -0.11533,0.653378 -0.42339,1.278247 -0.49232,1.940025 -0.0472,0.453369 -0.005,0.819455 0.0231,1.27344 -0.21523,0.500354 -0.58291,1.035063 -0.62988,1.596125 -0.041,0.489993 0.14039,0.672024 0.15682,1.150165 0.005,0.152456 -0.0416,0.302244 -0.0624,0.453367 -0.0485,0.128259 -0.11628,0.250801 -0.14547,0.384778 -0.0594,0.272888 0.0556,0.572714 -0.0342,0.837168 -0.18711,0.550907 -0.30116,0.07393 -0.65838,0.482388 -0.086,0.09833 -0.0527,0.255881 -0.0791,0.383823 0.0343,0.169953 0.10746,0.336548 0.10281,0.50986 -0.005,0.167852 -0.23199,0.73583 -0.41841,0.789694 -0.31674,0.09152 -0.66165,-0.05041 -0.98902,-0.01135 -0.6008,0.0717 -0.65293,0.231621 -1.06023,0.606695 -0.18997,0.129137 -0.51861,0.163512 -0.56991,0.387418 -0.074,0.322816 0.30104,0.629693 0.26151,0.958505 -0.0293,0.24393 -0.28391,0.40229 -0.44715,0.58589 -0.85412,0.96064 -1.64281,0.91655 -2.85321,1.09414 -0.27994,0.12479 -0.5608,0.24753 -0.8398,0.37438 -0.23662,0.10757 -0.45982,0.24859 -0.70704,0.32885 -0.7081,0.22988 -1.46533,0.13738 -2.17849,0.31258 -0.169,0.0415 -0.32101,0.13454 -0.48151,0.2018 -0.23955,-7.9e-4 -0.48606,-0.06 -0.71866,-0.003 -1.18623,0.29217 1.04843,0.50449 -1.11811,0.29888 -0.45306,-0.043 -0.9016,-0.34878 -1.3438,-0.2412 -0.20837,0.0507 -0.0234,0.48018 -0.19054,0.61448 -0.2292,0.18413 -0.56872,0.14927 -0.85309,0.2239 -0.0961,0.65748 -1.21412,0.93996 -1.48064,1.29191 -0.12741,0.16825 -0.0731,0.41978 -0.15736,0.61328 -0.29389,0.6749 -0.41183,0.45917 -1.18283,0.53357 -0.12489,0.1088 -0.38043,0.16086 -0.37467,0.3264 0.0103,0.2965 0.326,0.50469 0.41344,0.78819 0.20767,0.67335 -0.0638,0.45146 -0.45336,0.7263 -0.11769,0.083 -0.18981,0.21768 -0.29722,0.31365 -0.11573,0.1034 -0.2467,0.18835 -0.37005,0.28252 -0.12218,0.0931 -0.3229,0.13196 -0.36652,0.27922 -0.0529,0.1785 0.19252,0.37241 0.12246,0.54489 -0.0611,0.15041 -0.33254,0.0946 -0.43375,0.22151 -0.0913,0.11455 -0.005,0.30889 -0.0865,0.43092 -0.091,0.13696 -0.26373,0.19645 -0.3956,0.29468 -0.0762,0.15146 -0.15236,0.30291 -0.22853,0.45437 -0.0255,0.18238 0.0284,0.39588 -0.0766,0.54715 -0.11028,0.15881 -0.46209,0.0993 -0.5034,0.28816 -0.0632,0.28876 0.59149,0.83332 0.16195,1.18767 -0.78252,0.64556 -0.62565,-0.43373 -0.61406,0.66702 0.13757,1.15222 0.19128,0.0622 -0.51749,0.73179 -0.2628,0.24828 0.1381,0.59701 -0.19551,0.82689 -0.84175,0.58 -0.52808,-0.43509 -0.68691,0.61908 0.0647,0.22977 0.25754,0.45921 0.19406,0.68932 -0.0488,0.1767 -0.32222,0.17858 -0.46518,0.29332 -0.15075,0.12099 -0.31384,0.24218 -0.41056,0.40955 -0.0998,0.17267 -0.10627,0.38445 -0.15941,0.57668 -0.0593,0.20019 -0.0724,0.42035 -0.17776,0.60058 -0.12855,0.21983 -0.33828,0.38074 -0.50742,0.57112 -0.40022,1.00118 -1.05362,1.86248 -1.59092,2.78515 -0.16643,0.2858 -0.25271,0.61967 -0.4535,0.88247 -0.88272,0.78591 -0.51888,0.35849 -1.12027,1.25723 -0.14208,0.17575 -0.30769,0.33485 -0.42625,0.52726 -0.10416,0.16906 -0.13562,0.37559 -0.2357,0.54709 -0.27641,0.47366 -0.36421,0.38965 -0.70275,0.79933 -0.26635,0.32232 -0.4808,0.68424 -0.72427,1.02418 -0.31435,0.63113 -0.84708,1.1125 -1.24577,1.68072 -0.12987,0.18509 -0.19828,0.41075 -0.33987,0.58704 -0.76179,0.94842 -0.29527,-0.0982 -0.67787,0.98471 -0.10892,0.34172 -0.21442,0.75008 -0.41597,1.05373 -0.11311,0.17041 -0.31207,0.27753 -0.40834,0.45798 -0.0959,0.17979 -0.036,0.42455 -0.15189,0.59215 -1.15355,1.66821 -0.0241,-0.86645 -0.75265,0.9503 -0.0748,0.17382 -0.1497,0.34764 -0.22455,0.52147 -0.18823,0.0961 -0.46452,0.1023 -0.56467,0.28842 -0.10572,0.19647 0.12318,0.45655 0.0503,0.66743 -0.13521,0.39144 -0.7611,0.51728 -1.01982,0.71759 -0.14689,0.11371 -0.23702,0.2861 -0.35552,0.42915 -0.25028,0.81731 -0.88926,1.42493 -1.25905,2.17486 -0.5574,1.13041 0.10957,0.31858 -0.74665,1.19015 -0.13287,0.15602 -0.29004,0.29425 -0.39861,0.46807 -0.30551,0.48912 -0.35719,1.09817 -0.76137,1.54241 -1.3282,1.45984 0.0847,-0.54657 -1.04869,1.17987 -0.42827,0.65311 -1.06364,1.24395 -1.29538,2.01436 -0.0834,0.27717 -0.0806,0.57326 -0.1161,0.86051 -0.0354,0.28682 0.023,0.59846 -0.0965,0.86159 -0.10648,0.2345 -0.3626,0.36584 -0.5439,0.54876 -0.92206,0.60791 -0.60291,0.12098 -0.50692,1.19704 0.0188,0.21076 -0.006,0.42325 -5.3e-4,0.63479 0.005,0.20119 0.10143,0.41463 0.0305,0.60297 -0.46122,1.22503 -0.47312,-0.75952 -0.32806,0.90965 -0.22413,0.0989 -0.56585,0.076 -0.6724,0.29659 -0.12079,0.25009 0.12721,0.54502 0.13177,0.82272 0.004,0.24107 -0.0462,0.482 -0.10648,0.71544 -0.26979,1.04421 -0.78578,0.90248 -1.73946,1.15601 0.10756,0.59841 0.2183,0.59638 -0.057,1.11196 -0.0745,0.13956 -0.27935,0.22292 -0.28293,0.38109 -0.0172,0.76133 0.71251,0.56274 0.10566,1.43954 0.4065,0.67959 -0.38133,1.18529 -0.19753,1.8678 0.27905,1.03618 0.54175,0.36387 0.10233,1.08467 -0.0204,0.78945 1.0052,1.42371 1.12396,2.11292 0.0256,0.14881 -0.19546,0.2339 -0.26254,0.36919 -0.14102,0.28441 -0.12035,0.48815 -0.13592,0.79303 0.16503,0.20609 0.36377,0.38922 0.49508,0.61827 0.60992,1.06385 -0.56671,-0.36025 0.26733,0.83259 0.16005,0.2289 0.40323,0.39199 0.56064,0.6227 0.084,0.12306 0.10077,0.28038 0.15115,0.42057 0.12742,0.16567 0.25483,0.33133 0.38224,0.497 0.29642,0.43499 0.79265,0.79076 1.03358,1.26515 0.0461,0.0908 0.0116,0.20476 0.0374,0.30329 0.0981,0.37388 0.19545,0.37112 0.5027,0.67692 0.20194,0.54855 0.29284,0.53724 0.75226,0.98629 0.26988,0.26378 0.37126,0.53553 0.64279,0.7936 0.11468,0.0878 0.28236,0.13289 0.34403,0.26352 0.0826,0.17489 -0.63276,-0.0568 -0.56661,0.12492 0.27489,0.75529 1.13879,0.3569 0.50967,1.30422 0.0598,0.11276 0.59348,1.07847 0.58608,1.22366 -0.008,0.15022 -0.33318,0.17276 -0.31595,0.32218 0.0873,0.75668 0.98745,0.53054 0.46862,1.4007 0.34019,0.49262 0.48441,0.46436 0.38685,1.00733 -0.0245,0.136 -0.1397,0.25168 -0.14089,0.38986 -0.002,0.17921 0.10492,0.34394 0.13303,0.52094 0.29633,1.8659 -0.29671,-1.03835 0.12354,0.93041 0.0246,0.6519 0.80276,0.83578 1.01083,1.36127 0.0667,0.16847 -0.22376,0.2975 -0.26709,0.47344 -0.0593,0.24095 0.0297,0.50355 -0.0327,0.74373 -0.0819,0.31542 -0.51663,0.90494 -0.69677,1.1688 0.15444,1.26721 0.27112,0.5277 -0.31632,1.45045 -0.11913,0.18713 -0.14705,0.43901 -0.31115,0.58826 -0.20267,0.18433 -0.53599,0.17802 -0.73655,0.36464 -1.23663,1.15065 0.91783,0.1126 -1.01347,0.87347 0.0942,0.27156 0.3229,0.53008 0.28261,0.81468 -0.0734,0.51837 -1.19747,0.39214 -1.46227,0.81978 -0.49023,0.79166 0.53749,0.33461 -0.67985,0.6465 -0.22219,0.37164 -0.7138,0.33355 -1.00317,0.59259 -0.18673,0.16716 -0.22015,0.46788 -0.41239,0.62868 -0.22762,0.19038 -0.63569,0.14095 -0.80178,0.38686 -1.85818,2.75122 1.63662,-0.69734 -0.52248,1.29879 0.0183,0.24599 0.20114,0.53939 0.0548,0.73796 -0.15759,0.21386 -0.51933,0.12286 -0.7645,0.22514 -0.20278,0.0846 -0.39899,0.19319 -0.56976,0.33143 -0.14787,0.11972 -0.26107,0.27818 -0.37315,0.43192 -0.1072,0.14705 -0.12382,0.37787 -0.282332,0.46726 -0.233598,0.13173 -0.528315,0.0925 -0.792472,0.13883 -0.167566,0.0951 -0.388007,0.1305 -0.502695,0.28532 -0.105461,0.14236 0.01146,0.38187 -0.09594,0.52277 -0.446085,0.58527 -0.615461,-0.0211 -1.124498,0.48888 -0.12182,0.12205 -0.05308,0.34227 -0.106413,0.50626 -0.05212,0.16026 -0.138724,0.30717 -0.208087,0.46076 -0.04489,0.15916 -0.08977,0.31833 -0.134654,0.47749 -0.08996,0.13467 -0.216882,0.25098 -0.26987,0.40401 -0.05822,0.16816 -0.006,0.35975 -0.05392,0.53112 -0.04302,0.15372 -0.223896,0.26879 -0.214514,0.42813 0.01524,0.25907 0.191654,0.4824 0.282438,0.72552 0.0853,0.22843 0.163843,0.45933 0.245763,0.689 -0.142356,0.10896 -0.448421,0.1489 -0.427072,0.3269 0.05822,0.48549 1.522405,1.57595 1.639449,1.72525 0.08295,0.10581 -0.01966,0.26898 -0.01159,0.40319 0.0094,0.1566 0.01217,0.31817 0.06385,0.46628 0.07171,0.20547 0.200703,0.3862 0.301054,0.57929 0.288581,0.81064 0.874334,1.30661 1.565493,1.75612 0.41757,0.21024 0.59239,0.66823 0.95143,0.94586 0.67857,0.52469 0.2766,0.0788 0.60224,0.46803 0.0816,0.0629 0.1658,0.12242 0.24472,0.18858 0.28084,0.23539 0.63515,0.38165 0.89182,0.64483 0.0308,0.0315 0.0926,0.12529 0.0486,0.12291 -0.23151,-0.0125 -0.45174,-0.10456 -0.67761,-0.15685 0.13846,0.0864 0.27692,0.17288 0.41539,0.25932 0.24927,0.12725 0.50897,0.23587 0.74781,0.38176 0.0569,0.0348 0.0781,0.10966 0.1284,0.15346 0.11429,0.0995 0.23431,0.19361 0.36265,0.27419 0.25368,0.15928 0.53599,0.27207 0.78126,0.44403 0.0248,0.0173 -0.0151,0.0586 -0.0226,0.0879 2.57013,1.53535 1.61313,1.88379 2.71164,1.40798 0,0 -2.36617,-1.74602 -2.36617,-1.74602 v 0 c -1.03339,-0.42274 -0.40606,-0.18756 1.66347,1.12805 -0.20903,-0.11008 -0.44719,-0.17712 -0.62709,-0.33025 -0.0465,-0.0396 0.19291,0.003 0.1747,-0.0548 -0.0669,-0.21404 -0.82802,-0.57976 -0.86697,-0.60915 -0.0226,-0.0171 0.0236,-0.0516 0.0354,-0.0774 -0.0944,-0.063 -0.1889,-0.12591 -0.28335,-0.18887 -1.02977,-0.49291 -2.02447,-0.93589 -2.85437,-1.72344 -0.60653,-0.44625 -1.0634,-1.08568 -1.72115,-1.48516 -0.712639,-0.63989 -1.275191,-0.68313 -1.598368,-1.74742 -0.112975,-0.73332 0.0096,-0.25893 -0.35713,-1.03758 -0.08021,-0.17028 -0.366342,-0.3922 -0.225898,-0.51751 0.209605,-0.18702 0.572621,0.047 0.842108,-0.0323 0.79258,-0.23319 -0.08953,-0.89114 -0.264687,-1.13599 0.02955,-0.17108 0.04342,-0.34561 0.08864,-0.51323 0.04292,-0.15906 0.17816,-0.29767 0.174591,-0.46237 -0.0047,-0.21664 -0.166828,-0.40474 -0.198014,-0.61917 -0.0241,-0.16572 0.03869,-0.33374 0.03507,-0.50117 -0.01619,-0.75047 -0.212714,-0.31778 0.217382,-0.8868 0.108005,-0.11655 0.191288,-0.26229 0.324011,-0.34966 0.163616,-0.10771 0.413565,-0.0759 0.544165,-0.22188 0.57357,-0.64117 -0.351122,-0.40042 0.32685,-0.98715 0.1617,-0.13994 0.44397,-0.0829 0.59872,-0.23045 0.1217,-0.11607 0.099,-0.32145 0.14846,-0.48218 -0.0132,-0.21528 -0.13014,-0.45009 -0.0396,-0.64585 0.0836,-0.18077 0.33684,-0.21379 0.49386,-0.33632 0.37004,-0.28875 0.54654,-0.44538 0.72089,-0.89075 0.0755,-0.1928 -0.0332,-0.50261 0.14775,-0.6033 0.30242,-0.16832 0.6912,-0.0373 1.0368,-0.056 0.86212,-0.64523 0.33203,-0.38625 1.66756,-0.59317 0.21876,-0.12128 0.1915,-0.48056 0.37612,-0.6493 0.20662,-0.18885 0.51893,-0.22017 0.74924,-0.37926 0.31474,-0.21739 0.47005,-0.62945 0.86686,-0.75194 0.0873,-1.18844 -0.15223,0.079 0.53185,-0.79473 0.0979,-0.12508 0.0817,-0.3098 0.087,-0.46856 0.0324,-0.98436 -0.42755,-1.17104 0.89537,-1.28689 -0.2334,-2.19318 -0.11305,0.48715 0.28349,-1.3049 0.06,-0.271 -0.0972,-0.55531 -0.0606,-0.83045 0.0295,-0.22239 0.19289,-0.40743 0.25363,-0.62339 0.30594,-1.08773 -0.22169,-0.49823 0.80182,-1.18523 0.0421,-0.35704 0.10297,-1.08567 0.24366,-1.42379 0.088,-0.21137 0.32673,-0.35136 0.37555,-0.57503 0.0489,-0.2238 -0.25628,-0.51057 -0.10172,-0.67964 0.17379,-0.19011 0.51395,-0.035 0.77093,-0.0524 0.0652,-0.10587 0.13047,-0.21175 0.1957,-0.31763 0.0247,-0.18984 0.0537,-1.2098 0.0166,-1.35076 -0.0944,-0.35928 -0.48287,-0.80711 -0.53156,-1.19524 -0.0154,-0.12293 0.0745,-0.23633 0.11174,-0.3545 -0.28218,-0.33346 -0.62176,-0.59136 -0.66967,-1.05322 -0.0125,-0.12095 0.12504,-0.24494 0.0769,-0.35661 -0.11677,-0.27092 -0.44738,-0.42351 -0.53461,-0.70534 -0.014,-0.045 0.36117,-0.72734 0.38651,-0.77455 -0.0534,-0.0865 -0.58172,-0.8317 -0.53748,-1.08383 0.0204,-0.11625 0.32962,-0.13231 0.26712,-0.23243 -0.40035,-0.64135 -1.2884,-0.72116 -1.7473,-1.28709 -0.22612,-0.20698 -0.72203,-0.48764 -0.76385,-0.82003 -0.009,-0.0721 0.12481,-0.13105 0.0937,-0.1967 -0.14626,-0.30922 -0.56874,-0.42617 -0.70932,-0.74157 -0.26401,-0.48632 -0.6945,-0.78618 -1.05717,-1.19918 -0.3504,-0.39902 -0.59956,-0.88907 -0.99881,-1.24902 -0.10593,-0.15524 -0.20233,-0.31742 -0.31778,-0.4657 -0.15266,-0.19606 -0.3747,-0.34332 -0.48536,-0.5658 -0.0518,-0.10407 0.0524,-0.23301 0.0312,-0.3473 -0.0284,-0.1534 -0.1142,-0.29043 -0.17595,-0.4337 -0.0635,-0.14739 -0.21505,-0.27831 -0.19978,-0.43807 0.0117,-0.1221 0.17732,-0.16952 0.26597,-0.25429 -0.11536,-0.23313 -0.94557,-1.67731 -0.93264,-1.79545 0.0409,-0.37387 1.3212,-0.38505 1.1165,-0.97229 -0.49935,-1.31241 -0.23855,-0.0666 0.0959,-0.98329 0.25283,-0.69303 -0.61894,-1.37476 -0.17753,-2.04864 -0.13617,-0.375 -0.31616,-0.54683 -0.0725,-0.91306 0.0845,-0.12709 0.31266,-0.15292 0.34397,-0.30232 0.1287,-0.61401 -0.67325,-0.82028 0.22647,-1.50129 -0.18175,-0.35252 -0.73462,-1.319 -0.75582,-1.75972 -0.0108,-0.22502 0.12737,-0.4344 0.22608,-0.63691 0.0986,-0.20232 0.19592,-0.41815 0.36215,-0.5699 0.18676,-0.1705 0.55754,-0.13752 0.66405,-0.36689 0.10868,-0.23407 -0.0934,-0.50762 -0.14013,-0.76144 1.30886,-0.85957 -0.23089,0.32907 0.47458,-0.82409 0.1009,-0.16494 0.33205,-0.19873 0.49112,-0.30865 0.16342,-0.11293 0.30338,-0.26004 0.47545,-0.35928 0.92702,-0.53467 0.7039,0.0551 0.66732,-1.09915 0.0594,-0.25241 0.033,-0.54247 0.1783,-0.75722 0.16814,-0.24846 1.23581,-0.8241 1.43435,-0.99874 0.58726,-0.51657 0.94189,-1.30763 1.44046,-1.89835 1.05119,-1.16636 0.14632,-0.0376 0.87135,-1.30734 0.28281,-0.4953 0.8223,-0.90948 1.09073,-1.37285 0.10195,-0.17597 0.14187,-0.38119 0.2128,-0.57179 0.37158,-1.16066 -0.015,-0.19994 0.65042,-1.25257 0.44201,-0.69923 0.70777,-1.51834 1.37112,-2.063 0.10527,-0.14899 0.24501,-0.27884 0.31581,-0.44696 0.14807,-0.35159 0.0642,-0.84536 0.36751,-1.14789 0.15694,-0.15654 0.48218,-0.10363 0.59678,-0.29337 0.11006,-0.18223 -0.0229,-0.42515 -0.0344,-0.63772 0.10624,-0.15277 0.21249,-0.30554 0.31873,-0.45831 1.31056,-1.57789 -0.47823,0.7497 0.46089,-1.11674 0.0919,-0.18275 0.33859,-0.24205 0.45895,-0.40747 0.12034,-0.16539 0.14479,-0.38446 0.24643,-0.56195 0.28271,-0.49366 0.36183,-0.47271 0.82271,-0.79725 1.27092,-1.09019 -0.3791,0.41664 0.73052,-0.92111 0.15372,-0.18532 0.38283,-0.29515 0.54909,-0.4693 0.48441,-0.50744 0.82581,-1.15256 1.30794,-1.66382 0.24296,-0.33846 0.52251,-0.64988 0.76151,-0.99115 0.32768,-0.46792 0.1822,-0.45166 0.55462,-0.90654 0.12904,-0.15761 0.30934,-0.26983 0.43099,-0.43321 0.13187,-0.17709 0.21497,-0.38574 0.32245,-0.57862 1.83969,-2.40526 -0.96647,1.38857 0.78894,-1.45963 0.17924,-0.29083 0.47917,-0.4909 0.67718,-0.76929 0.20688,-0.29087 0.34549,-0.62494 0.53124,-0.92973 1.7753,-2.91298 -0.46391,0.90262 1.12868,-1.83387 0.22167,-0.80323 0.0804,-0.65449 0.57052,-1.23009 0.1316,-0.15454 0.32726,-0.26054 0.41959,-0.4413 0.0908,-0.17774 0.0927,-0.39007 0.10671,-0.58915 0.0141,-0.19971 -0.12471,-0.42782 -0.0228,-0.60017 0.10643,-0.18007 0.36863,-0.19781 0.55294,-0.29671 0.41426,-0.88767 0.11898,0.0564 -0.18558,-1.09833 -0.15231,-0.5775 0.34181,-0.25204 0.22773,-0.81088 -0.20717,-1.01484 -0.65695,-0.38401 0.002,-1.00376 0.59688,-0.72591 0.14401,0.0516 -0.0797,-1.05244 -0.16573,-0.81786 0.46652,-0.15363 0.66564,-0.73003 0.80183,-2.32115 -1.0996,0.62451 0.0991,-1.08595 0.0595,-0.1596 0.15079,-0.31075 0.17863,-0.4788 0.0283,-0.17104 -0.0754,-0.35813 -0.0132,-0.51993 0.0528,-0.1373 0.27989,-0.15688 0.32717,-0.29618 0.054,-0.15918 -0.15067,-0.36183 -0.0566,-0.50112 0.1,-0.148 0.37813,-0.0463 0.50871,-0.16818 0.10545,-0.0984 0.0785,-0.27759 0.11772,-0.41638 0.36904,-0.72923 -0.0139,-0.064 0.48668,-0.69139 0.34907,-0.43753 0.0977,-0.47656 0.89188,-0.4592 0.37137,0.008 0.73542,0.19925 1.10391,0.15238 0.16229,-0.0206 0.23723,-0.22536 0.35584,-0.33804 -0.0232,-0.21675 -0.18572,-0.46575 -0.0696,-0.65025 0.12035,-0.19126 1.38306,-0.40268 1.46432,-0.44557 0.4313,-0.22768 0.84849,-1.26917 1.55097,-1.23401 0.342,-0.88516 0.0201,-0.56985 1.12838,-0.74428 0.14806,-0.26576 -0.29783,-0.54406 -0.34632,-0.84439 -0.13477,-0.83465 0.75378,-0.24124 0.99545,-0.84067 0.87338,-0.13447 1.71106,-0.42698 2.58237,-0.56756 0.33939,-0.0547 0.68503,-0.0625 1.02527,-0.1117 0.3703,-0.0536 0.73674,-0.13108 1.10511,-0.19661 0.74949,-0.47458 0.90631,-0.63937 1.78928,-0.9125 0.3379,-0.10452 0.69531,-0.13284 1.0376,-0.2219 0.31473,-0.0819 0.60789,-0.25735 0.93142,-0.29041 0.46854,-0.0479 0.95778,0.17533 1.41203,0.0509 0.20915,-0.0573 0.24397,-0.35858 0.36595,-0.53787 0.1206,-0.16951 0.3179,-0.30518 0.3618,-0.508532 0.14238,-0.659524 -0.48708,-0.902121 -0.61259,-1.481675 -0.079,-0.364879 0.72778,-0.860761 0.98115,-0.939731 0.0602,-0.113049 0.1874,-0.211222 0.18073,-0.339151 -0.0583,-1.118595 -0.38038,-0.0097 -0.27247,-0.9891 0.0277,-0.251386 0.21481,-0.462004 0.27155,-0.708464 0.033,-0.143269 0.0309,-0.292404 0.0463,-0.438608 0.0432,-0.139956 0.0675,-0.287252 0.12967,-0.419872 0.10232,-0.218152 0.41862,-0.571352 0.49632,-0.796764 0.1981,-0.574675 0.10877,-1.256374 0.16457,-1.847625 0.17251,-0.321582 0.3718,-0.653693 0.47717,-1.007118 0.11484,-0.385201 0.07,-0.625274 0.16209,-1.016299 0.0369,-0.156744 0.11107,-0.302548 0.15652,-0.45703 0.0459,-0.15589 0.0781,-0.315471 0.11717,-0.473205 -0.0185,-0.281027 -0.0956,-0.862629 0.0419,-1.138081 0.18568,-0.37179 1.47685,-1.367589 1.82354,-1.702803 0.1919,-0.114641 0.3961,-0.210836 0.5757,-0.343924 0.67151,-0.497591 0.97785,-1.330637 1.36646,-2.03227 0.2842,-0.211614 0.71277,-0.518028 0.96612,-0.76086 0.15423,-0.147828 0.26823,-0.335579 0.42946,-0.475752 0.59615,-0.518314 1.36661,-0.789898 2.06114,-1.137767 0.17755,-0.148873 0.37656,-0.275391 0.53267,-0.446614 0.41999,-0.460621 0.6703,-1.142415 1.15555,-1.550183 0.18587,-0.156189 0.42973,-0.227147 0.63479,-0.357129 0.19095,-0.121042 0.36765,-0.263221 0.55148,-0.39483 1.33902,-1.096052 -0.40143,0.281043 1.14654,-0.7787 0.19263,-0.131877 0.31189,-0.400278 0.54109,-0.444649 0.7724,-0.149537 1.54907,0.385456 2.22259,-0.258405 0.16938,-0.161922 0.14887,-0.444378 0.2233,-0.666567 0.34196,-0.0083 0.69328,0.05499 1.02589,-0.02484 0.42107,-0.101076 1.36925,-0.902417 1.52055,-1.325927 0.0838,-0.234627 -0.0951,-0.579067 0.0937,-0.741553 0.26182,-0.225232 0.67617,-0.141079 1.01425,-0.211619 -0.13401,-0.368808 -0.50064,-0.72662 -0.40202,-1.10643 0.0746,-0.287157 0.56053,-0.219228 0.79381,-0.402521 0.18358,-0.14424 0.26215,-0.389654 0.42604,-0.555918 0.37168,-0.377053 0.93856,-0.51267 1.29045,-0.917734 0.11462,-0.127349 0.19681,-0.2941 0.34385,-0.382053 0.71231,-0.426091 0.49186,0.06286 1.07115,-0.461143 0.98893,-0.89454 -0.47847,0.114287 0.60437,-0.761941 0.15033,-0.121648 0.33184,-0.198676 0.49776,-0.298014 1.1285,-0.455072 2.10061,-1.202629 3.26614,-1.56777 0.21593,-0.05964 0.42747,-0.138467 0.6478,-0.17893 0.26345,-0.04838 0.5468,0.0039 0.79887,-0.08674 0.17328,-0.06229 0.27207,-0.250262 0.42481,-0.353108 0.16835,-0.113361 0.36189,-0.184957 0.534,-0.292518 0.9335,-0.583401 -0.0479,-0.11298 1.07775,-0.592891 0.18461,-0.09137 0.91197,-0.476978 1.12846,-0.479759 0.35844,-0.0046 0.70072,0.168146 1.05854,0.189794 0.16724,0.01011 0.33033,-0.05751 0.49343,-0.09591 0.76609,-0.180362 0.0993,-0.205867 1.32028,0.198083 1.56017,0.378277 3.1112,0.77866 4.73109,0.68495 0.29416,0.006 0.58843,0.02816 0.88247,0.01807 0.98703,-0.03383 0.52016,-0.07272 1.44226,-0.237789 0.84425,-0.151135 0.84903,-0.09065 1.75249,-0.09692 0.32657,-0.0024 0.65305,-0.0118 0.97958,-0.0177 3.69991,-0.05881 -0.84822,0.141488 1.64173,-0.271471 0.30523,-0.05062 0.63069,0.08513 0.92818,1.43e-4 0.20266,-0.05789 1.20192,-1.229484 1.48441,-1.188495 0.11259,-0.215976 0.20075,-0.446566 0.33777,-0.647927 0.14801,-0.217504 0.4042,-0.360704 0.51192,-0.600726 0.10843,-0.241618 0.0257,-0.53594 0.11076,-0.786744 0.0768,-0.22642 0.26595,-0.399788 0.36538,-0.61722 1.03408,-2.261357 -0.5722,0.789657 0.60444,-1.381167 0.0273,-0.481052 0.10181,-0.961102 0.0887,-1.442749 -0.006,-0.211506 -0.17764,-0.442836 -0.0787,-0.629852 0.0963,-0.182022 0.40729,-0.127627 0.55527,-0.270846 0.14385,-0.139229 0.28514,-0.792731 0.32852,-0.960503 0.17099,-0.531225 0.44942,-1.01709 0.50839,-1.57952 0.0478,-0.456227 -0.0539,-0.824061 0.0573,-1.279255 0.0507,-0.207587 0.1682,-0.392893 0.25231,-0.589341 0.082,-0.498441 0.24482,-0.984713 0.28627,-1.488157 0.0529,-0.642842 -0.12608,-0.840521 -0.007,-1.447969 0.0352,-0.179295 0.15985,-0.332899 0.19554,-0.512104 0.0416,-0.209061 0.0224,-0.425741 0.0336,-0.638614 0.0244,-0.206034 0.004,-0.422357 0.0733,-0.618104 0.73129,-2.081321 -0.0981,1.210982 0.47869,-0.916236 0.051,-0.188317 0.0255,-0.397553 0.10456,-0.575935 0.14375,-0.324376 0.5111,-0.51363 0.65035,-0.842613 0.75671,-0.760251 -0.22206,0.16237 0.69815,-0.501451 0.10783,-0.07778 0.1722,-0.20559 0.27823,-0.285811 0.36517,-0.276302 0.82872,-0.376381 1.21525,-0.614088 0.70058,-0.265625 1.49931,-0.219704 2.24234,-0.214108 0.55339,0.02609 1.0516,0.09177 1.59907,0.182755 0.21354,0.03549 0.43463,0.03158 0.64323,0.08942 0.37554,0.104121 0.72143,0.304496 1.1007,0.394094 0.19575,0.04624 0.40224,0.0056 0.60335,0.0085 0.62984,0.04478 1.26105,0.133059 1.89183,0.158101 0.15795,0.0063 0.31783,-0.02732 0.47422,-0.0043 0.48476,0.07139 0.95981,0.315249 1.39907,0.501306 0.0186,-0.08245 -0.0286,-0.242623 0.0557,-0.247348 0.23793,-0.01333 0.45679,0.136022 0.68462,0.205883 0.25494,0.07817 0.50494,0.173701 0.76367,0.238207 0.17051,0.04251 0.35608,0.02074 0.52078,0.08203 0.31704,0.117983 0.5935,0.329527 0.90952,0.450236 0.0806,0.0308 0.17259,-0.0026 0.25888,-0.0039 z"
|
||
stroke-width="2" fill="none" stroke-dasharray="4,4" />
|
||
</svg>
|
||
|
||
<!-- 小红旗 -->
|
||
<div id="redFlag"></div>
|
||
</div>
|
||
|
||
<div id="subtitle">1934年10月 从江西瑞金出发</div>
|
||
|
||
<div id="controls">
|
||
<button onclick="play()">开始</button>
|
||
<button onclick="pause()">暂停</button>
|
||
<button onclick="reset()">重播</button>
|
||
</div>
|
||
|
||
<script>
|
||
const flag = document.getElementById("redFlag");
|
||
const subtitle = document.getElementById("subtitle");
|
||
const route = document.getElementById("route");
|
||
const map = document.getElementById("map");
|
||
|
||
const timeline = [
|
||
{ p: 0, text: "1934年10月 从江西瑞金出发" },
|
||
{ p: 10, text: "1934年11月 血战湘江" },
|
||
{ p: 20, text: "1935年1月 遵义会议" },
|
||
{ p: 35, text: "四渡赤水" },
|
||
{ p: 50, text: "强渡大渡河，飞夺泸定桥" },
|
||
{ p: 65, text: "翻越夹金山" },
|
||
{ p: 80, text: "穿越草地，懋功会师" },
|
||
{ p: 95, text: "1935年10月 到达吴起镇" }
|
||
];
|
||
|
||
let animationId;
|
||
let startTime;
|
||
let pausedTime = 0;
|
||
let isPlaying = false;
|
||
const duration = 20000; // 20秒
|
||
|
||
// 获取SVG路径的总长度
|
||
const pathLength = route.getTotalLength();
|
||
|
||
// 根据进度百分比获取路径上的点
|
||
function getPointOnPath(percent) {
|
||
const distance = percent * pathLength / 100;
|
||
const point = route.getPointAtLength(distance);
|
||
|
||
// 将SVG坐标转换为页面坐标
|
||
const svgPoint = route.ownerSVGElement.createSVGPoint();
|
||
svgPoint.x = point.x;
|
||
svgPoint.y = point.y;
|
||
|
||
const matrix = route.ownerSVGElement.getScreenCTM();
|
||
const transformedPoint = svgPoint.matrixTransform(matrix);
|
||
|
||
// 转换为相对于#map容器的坐标
|
||
const mapRect = map.getBoundingClientRect();
|
||
|
||
return {
|
||
x: transformedPoint.x - mapRect.left,
|
||
y: transformedPoint.y - mapRect.top
|
||
};
|
||
}
|
||
|
||
// 更新红旗位置
|
||
function updateFlagPosition(percent) {
|
||
// 获取SVG元素和路径
|
||
const svg = document.querySelector('svg');
|
||
const path = document.querySelector('#route');
|
||
const pathLength = path.getTotalLength();
|
||
const point = path.getPointAtLength(pathLength * percent / 100);
|
||
|
||
// 仅在动画进行中输出（避免与初始坐标重复）
|
||
if (percent > 0) {
|
||
console.log(`SVG实时坐标: (${point.x.toFixed(6)}, ${point.y.toFixed(6)})`);
|
||
}
|
||
|
||
// 转换为页面坐标
|
||
const svgPoint = svg.createSVGPoint();
|
||
svgPoint.x = point.x;
|
||
svgPoint.y = point.y;
|
||
const screenPoint = svgPoint.matrixTransform(svg.getScreenCTM());
|
||
|
||
// 设置红旗位置
|
||
const mapRect = map.getBoundingClientRect();
|
||
const x = screenPoint.x - mapRect.left;
|
||
const y = screenPoint.y - mapRect.top;
|
||
|
||
flag.style.left = `${x}px`;
|
||
flag.style.top = `${y}px`;
|
||
}
|
||
|
||
// 动画循环
|
||
function animate(timestamp) {
|
||
if (!startTime) startTime = timestamp;
|
||
|
||
const elapsed = timestamp - startTime + pausedTime;
|
||
const progress = Math.min(elapsed / duration, 1) * 100;
|
||
|
||
updateFlagPosition(progress);
|
||
updateSubtitle(progress);
|
||
|
||
if (progress < 100) {
|
||
animationId = requestAnimationFrame(animate);
|
||
} else {
|
||
isPlaying = false;
|
||
}
|
||
}
|
||
|
||
function play() {
|
||
if (!isPlaying) {
|
||
isPlaying = true;
|
||
startTime = null;
|
||
animationId = requestAnimationFrame(animate);
|
||
}
|
||
}
|
||
|
||
function pause() {
|
||
if (isPlaying) {
|
||
isPlaying = false;
|
||
cancelAnimationFrame(animationId);
|
||
if (startTime) {
|
||
pausedTime += performance.now() - startTime;
|
||
}
|
||
}
|
||
}
|
||
|
||
function reset() {
|
||
pause();
|
||
pausedTime = 0;
|
||
updateFlagPosition(0);
|
||
subtitle.textContent = timeline[0].text;
|
||
}
|
||
|
||
function updateSubtitle(percent) {
|
||
for (let i = timeline.length - 1; i >= 0; i--) {
|
||
if (percent >= timeline[i].p) {
|
||
subtitle.textContent = timeline[i].text;
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 页面加载完成后初始化红旗位置
|
||
window.addEventListener('load', function() {
|
||
// 确保红旗在初始位置可见
|
||
updateFlagPosition(0);
|
||
|
||
// 检查红旗图片是否加载成功
|
||
const img = new Image();
|
||
img.onload = function() {
|
||
// 图片加载成功，使用图片作为背景
|
||
flag.style.backgroundImage = 'url("hongqi.jpg")';
|
||
flag.style.backgroundColor = 'transparent';
|
||
};
|
||
img.onerror = function() {
|
||
// 图片加载失败，使用备用样式
|
||
console.warn('红旗图片加载失败，使用备用样式');
|
||
flag.style.backgroundImage = 'none';
|
||
flag.style.backgroundColor = 'red';
|
||
};
|
||
img.src = 'hongqi.jpg';
|
||
});
|
||
|
||
// 添加页面加载完成事件监听
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 确保SVG和图片加载完成后执行
|
||
setTimeout(function() {
|
||
// 输出初始SVG坐标
|
||
logInitialSVGCoordinates();
|
||
}, 100); // 短暂延迟确保资源加载完成
|
||
});
|
||
|
||
// 初始SVG坐标日志（仅输出一次）
|
||
function logInitialSVGCoordinates() {
|
||
const path = document.querySelector('#route');
|
||
const point = path.getPointAtLength(0); // 路径起点
|
||
console.log(`SVG初始坐标: (${point.x.toFixed(6)}, ${point.y.toFixed(6)})`);
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |