92 lines
3.5 KiB
HTML
92 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>军事攻击箭头（点击开始）</title>
|
||
<style>
|
||
/* 基础布局 */
|
||
body{margin:0;padding:20px;background:#f5f1e6;font-family:"SimSun",serif}
|
||
.map-container{
|
||
width:896px; /* 与图片同宽 */
|
||
height:1152px; /* 与图片同高 */
|
||
margin:0 auto;
|
||
position:relative;
|
||
/* 正式使用时把下面url换成你的图片路径；现在先用背景色占位 */
|
||
background:#e8dfca url('D:/dsWork/dsProject/dsLightRag/XingJun/c9fc2122-9324-4e2b-9bae-ced575575eca-1.png') center/contain no-repeat;
|
||
border:2px solid #8b7355;
|
||
overflow:auto;
|
||
}
|
||
/* 控制栏 */
|
||
.animation-controls{position:absolute;top:10px;left:10px;z-index:100}
|
||
.animation-controls button{margin-right:5px;padding:5px 10px}
|
||
|
||
/* SVG箭头样式 */
|
||
svg{position:absolute;top:0;left:0;width:100%;height:100%}
|
||
.attack-arrow{
|
||
fill:none;
|
||
stroke:#b70000;
|
||
stroke-width:14;
|
||
stroke-linecap:round;
|
||
stroke-linejoin:round;
|
||
marker-end:url(#arrowhead)
|
||
}
|
||
|
||
/* 地名/部队标注 */
|
||
.label{position:absolute;font-size:14px;font-weight:bold;color:#000;
|
||
background:rgba(255,255,255,.8);padding:2px 5px;border-radius:3px}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="map-container">
|
||
<!-- 控制按钮 -->
|
||
<div class="animation-controls">
|
||
<button onclick="startAnimation()">开始</button>
|
||
<button onclick="pauseAnimation()">暂停</button>
|
||
<button onclick="resetAnimation()">重置</button>
|
||
</div>
|
||
|
||
<!-- 地图层SVG -->
|
||
<svg>
|
||
|
||
<!-- 行军路径（透明） -->
|
||
<path id="animationPath" d="M100,300 Q300,200 500,300 T900,300" fill="none"/>
|
||
|
||
<!-- 真正的箭头 -->
|
||
<g id="arrowGroup">
|
||
<path id="movingArrow"
|
||
d="m216.91503,274.91109c0.26021,-11.6278 -0.1665,-23.27113 2.13988,-34.87848c56.67197,3.81831 112.67554,10.06601 168.39255,15.68451c2.99113,-5.70158 1.58328,-10.4311 4.18213,-15.70261c35.79493,11.0927 71.2671,22.34337 105.28547,34.12978c-32.63733,13.36985 -70.07352,24.98065 -106.82583,36.87022c-1.19012,-5.5368 -2.38046,-11.07356 -3.5706,-16.61037c-54.1675,5.3566 -111.45142,10.8948 -165.96914,15.79176c-3.70747,-11.29953 -3.5985,-23.60505 -3.63446,-35.28482z"
|
||
class="attack-arrow">
|
||
<!-- 默认不执行；begin="indefinite" -->
|
||
<animateMotion id="arrowAnimation" dur="10s" repeatCount="indefinite" begin="indefinite">
|
||
<mpath href="#animationPath"/>
|
||
</animateMotion>
|
||
</path>
|
||
</g>
|
||
</svg>
|
||
|
||
<!-- 一些标注 -->
|
||
<div class="label" style="top:480px;left:80px">9纵</div>
|
||
<div class="label" style="top:380px;left:280px">73军</div>
|
||
<div class="label" style="top:230px;left:680px">莱芜</div>
|
||
</div>
|
||
|
||
<script>
|
||
/* 控制函数 */
|
||
function startAnimation(){
|
||
const anim = document.getElementById('arrowAnimation');
|
||
anim.beginElement(); // 开始/继续
|
||
}
|
||
function pauseAnimation(){
|
||
const anim = document.getElementById('arrowAnimation');
|
||
anim.endElement(); // 立即暂停（SVG 1.1简单办法）
|
||
}
|
||
function resetAnimation(){
|
||
const anim = document.getElementById('arrowAnimation');
|
||
anim.endElement(); // 先停
|
||
/* 把箭头瞬移到起点（100,300） */
|
||
document.getElementById('arrowGroup').setAttribute('transform','translate(100,300)');
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |