'commit'
This commit is contained in:
@@ -1,73 +1,92 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>军事攻击箭头（平滑版）</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
background-color: #f5f1e6;
|
||||
font-family: "SimSun", serif;
|
||||
}
|
||||
<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}
|
||||
|
||||
.map {
|
||||
width: 896px; /* 设置为图片宽度 */
|
||||
height: 1152px; /* 设置为图片高度 */
|
||||
margin: 0 auto;
|
||||
background-image: url('D:/dsWork/dsProject/dsLightRag/XingJun/c9fc2122-9324-4e2b-9bae-ced575575eca-1.png');
|
||||
background-size: contain; /* 改为contain确保完整显示 */
|
||||
background-position: center;
|
||||
background-repeat: no-repeat; /* 防止图片重复 */
|
||||
border: 2px solid #8b7355;
|
||||
position: relative;
|
||||
overflow: auto; /* 如需完整查看可添加滚动条 */
|
||||
}
|
||||
/* 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)
|
||||
}
|
||||
|
||||
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,0.8);
|
||||
padding: 2px 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
</style>
|
||||
/* 地名/部队标注 */
|
||||
.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">
|
||||
<body>
|
||||
<div class="map-container">
|
||||
<!-- 控制按钮 -->
|
||||
<div class="animation-controls">
|
||||
<button onclick="startAnimation()">开始</button>
|
||||
<button onclick="pauseAnimation()">暂停</button>
|
||||
<button onclick="resetAnimation()">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 地图层SVG -->
|
||||
<svg>
|
||||
<defs>
|
||||
<marker id="arrowhead" markerWidth="14" markerHeight="14" refX="13" refY="7" orient="auto">
|
||||
</marker>
|
||||
</defs>
|
||||
<path 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" marker-end="url(#arrowhead)" />
|
||||
|
||||
<!-- 行军路径（透明） -->
|
||||
<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>
|
||||
<!-- 一些标注 -->
|
||||
<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>
|
||||
Reference in New Issue
Block a user