From e8f04bdd0747c64fa660e30b08a0125f033dad53 Mon Sep 17 00:00:00 2001
From: HuangHai <10402852@qq.com>
Date: Mon, 8 Sep 2025 13:59:14 +0800
Subject: [PATCH] 'commit'

---
 dsLightRag/XingJun/history_lesson.html | 139 ++++++++++++++-----------
 1 file changed, 79 insertions(+), 60 deletions(-)
diff --git a/dsLightRag/XingJun/history_lesson.html b/dsLightRag/XingJun/history_lesson.html
index bb7c1bc2..9b9dd010 100644
--- a/dsLightRag/XingJun/history_lesson.html
+++ b/dsLightRag/XingJun/history_lesson.html
@@ -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>
\ No newline at end of file
