'commit'
This commit is contained in:
@@ -2,72 +2,91 @@
|
|||||||
<html lang="zh-CN">
|
<html lang="zh-CN">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>军事攻击箭头（平滑版）</title>
|
<title>军事攻击箭头（点击开始）</title>
|
||||||
<style>
|
<style>
|
||||||
body {
|
/* 基础布局 */
|
||||||
margin: 0;
|
body{margin:0;padding:20px;background:#f5f1e6;font-family:"SimSun",serif}
|
||||||
padding: 20px;
|
.map-container{
|
||||||
background-color: #f5f1e6;
|
width:896px; /* 与图片同宽 */
|
||||||
font-family: "SimSun", serif;
|
height:1152px; /* 与图片同高 */
|
||||||
}
|
|
||||||
|
|
||||||
.map {
|
|
||||||
width: 896px; /* 设置为图片宽度 */
|
|
||||||
height: 1152px; /* 设置为图片高度 */
|
|
||||||
margin:0 auto;
|
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;
|
position:relative;
|
||||||
overflow: auto; /* 如需完整查看可添加滚动条 */
|
/* 正式使用时把下面url换成你的图片路径；现在先用背景色占位 */
|
||||||
}
|
background:#e8dfca url('D:/dsWork/dsProject/dsLightRag/XingJun/c9fc2122-9324-4e2b-9bae-ced575575eca-1.png') center/contain no-repeat;
|
||||||
|
border:2px solid #8b7355;
|
||||||
svg {
|
overflow:auto;
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
}
|
||||||
|
/* 控制栏 */
|
||||||
|
.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{
|
.attack-arrow{
|
||||||
fill:none;
|
fill:none;
|
||||||
stroke:#b70000;
|
stroke:#b70000;
|
||||||
stroke-width:14;
|
stroke-width:14;
|
||||||
stroke-linecap:round;
|
stroke-linecap:round;
|
||||||
stroke-linejoin:round;
|
stroke-linejoin:round;
|
||||||
marker-end: url(#arrowhead);
|
marker-end:url(#arrowhead)
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
/* 地名/部队标注 */
|
||||||
position: absolute;
|
.label{position:absolute;font-size:14px;font-weight:bold;color:#000;
|
||||||
font-size: 14px;
|
background:rgba(255,255,255,.8);padding:2px 5px;border-radius:3px}
|
||||||
font-weight: bold;
|
|
||||||
color: #000;
|
|
||||||
background: rgba(255,255,255,0.8);
|
|
||||||
padding: 2px 5px;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<div class="map-container">
|
||||||
<div class="map">
|
<!-- 控制按钮 -->
|
||||||
<svg>
|
<div class="animation-controls">
|
||||||
<defs>
|
<button onclick="startAnimation()">开始</button>
|
||||||
<marker id="arrowhead" markerWidth="14" markerHeight="14" refX="13" refY="7" orient="auto">
|
<button onclick="pauseAnimation()">暂停</button>
|
||||||
</marker>
|
<button onclick="resetAnimation()">重置</button>
|
||||||
</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)" />
|
|
||||||
</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>
|
||||||
|
|
||||||
|
<!-- 地图层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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user