'commit'
This commit is contained in:
@@ -2,156 +2,72 @@
|
|||||||
<html lang="zh-CN">
|
<html lang="zh-CN">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<title>军事攻击箭头（平滑版）</title>
|
||||||
<title>历史战役模拟 - 锦州进攻动画</title>
|
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
background-color: #f0f0f0;
|
background-color: #f5f1e6;
|
||||||
|
font-family: "SimSun", serif;
|
||||||
}
|
}
|
||||||
.map-container {
|
|
||||||
|
.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;
|
position: relative;
|
||||||
width: 896px;
|
overflow: auto; /* 如需完整查看可添加滚动条 */
|
||||||
height: 1152px;
|
|
||||||
overflow: auto;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
}
|
}
|
||||||
#background-map {
|
|
||||||
width: 100%;
|
svg {
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
#attack-svg {
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
.city-marker {
|
|
||||||
fill: red;
|
.attack-arrow {
|
||||||
animation: pulse 2s infinite;
|
fill: none;
|
||||||
|
stroke: #b70000;
|
||||||
|
stroke-width: 14;
|
||||||
|
stroke-linecap: round;
|
||||||
|
stroke-linejoin: round;
|
||||||
|
marker-end: url(#arrowhead);
|
||||||
}
|
}
|
||||||
.city-label {
|
|
||||||
font-family: "SimSun", serif;
|
.label {
|
||||||
font-size: 18px;
|
|
||||||
font-weight: bold;
|
|
||||||
fill: darkred;
|
|
||||||
}
|
|
||||||
@keyframes pulse {
|
|
||||||
0% { r: 8; opacity: 1; }
|
|
||||||
50% { r: 12; opacity: 0.7; }
|
|
||||||
100% { r: 8; opacity: 1; }
|
|
||||||
}
|
|
||||||
.control-panel {
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 20px;
|
font-size: 14px;
|
||||||
right: 20px;
|
font-weight: bold;
|
||||||
background-color: rgba(255,255,255,0.8);
|
color: #000;
|
||||||
padding: 15px;
|
background: rgba(255,255,255,0.8);
|
||||||
border-radius: 8px;
|
padding: 2px 5px;
|
||||||
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
|
border-radius: 3px;
|
||||||
}
|
|
||||||
button {
|
|
||||||
padding: 8px 15px;
|
|
||||||
margin: 0 5px;
|
|
||||||
background-color: #4CAF50;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
button:hover {
|
|
||||||
background-color: #45a049;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="map-container">
|
|
||||||
<!-- 背景图 -->
|
|
||||||
<img id="background-map" src="c9fc2122-9324-4e2b-9bae-ced575575eca-1.png" alt="历史地图" width="896" height="1152">
|
|
||||||
|
|
||||||
<!-- SVG动画层 -->
|
<div class="map">
|
||||||
<svg id="attack-svg" viewBox="0 0 896 1152">
|
<svg>
|
||||||
<!-- 定义箭头标记 -->
|
|
||||||
<defs>
|
<defs>
|
||||||
<marker id="arrowhead" markerWidth="10" markerHeight="7"
|
<marker id="arrowhead" markerWidth="14" markerHeight="14" refX="13" refY="7" orient="auto">
|
||||||
refX="9" refY="3.5" orient="auto">
|
|
||||||
<polygon points="0 0, 10 3.5, 0 7" fill="#ff0000" />
|
|
||||||
</marker>
|
</marker>
|
||||||
</defs>
|
</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)" />
|
||||||
<!-- 锦州城市标记 -->
|
|
||||||
<circle cx="650" cy="420" r="8" class="city-marker" />
|
|
||||||
<text x="670" y="425" class="city-label">锦州</text>
|
|
||||||
|
|
||||||
<!-- 箭头1: 西北方向进攻 -->
|
|
||||||
<path id="arrow1" d="M 300,200 Q 450,280 550,350" fill="none" stroke="#ff0000"
|
|
||||||
stroke-width="3" marker-end="url(#arrowhead)">
|
|
||||||
<animateMotion dur="8s" repeatCount="indefinite">
|
|
||||||
<mpath href="#arrow1" />
|
|
||||||
</animateMotion>
|
|
||||||
</path>
|
|
||||||
|
|
||||||
<!-- 箭头2: 东北方向进攻 -->
|
|
||||||
<path id="arrow2" d="M 500,150 Q 550,250 600,350" fill="none" stroke="#0000ff"
|
|
||||||
stroke-width="3" marker-end="url(#arrowhead)">
|
|
||||||
<animateMotion dur="6s" begin="1s" repeatCount="indefinite">
|
|
||||||
<mpath href="#arrow2" />
|
|
||||||
</animateMotion>
|
|
||||||
</path>
|
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
<!-- 控制面板 -->
|
<!-- 标注 -->
|
||||||
<div class="control-panel">
|
<div class="label" style="top: 480px; left: 80px;">9纵</div>
|
||||||
<button onclick="startAnimation()">开始动画</button>
|
<div class="label" style="top: 380px; left: 280px;">73军</div>
|
||||||
<button onclick="pauseAnimation()">暂停动画</button>
|
<div class="label" style="top: 230px; left: 680px;">莱芜</div>
|
||||||
<button onclick="resetAnimation()">重置动画</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
|
||||||
// 获取SVG元素和动画
|
|
||||||
const svg = document.getElementById('attack-svg');
|
|
||||||
const animations = svg.querySelectorAll('animateMotion');
|
|
||||||
const arrow1 = document.getElementById('arrow1');
|
|
||||||
const arrow2 = document.getElementById('arrow2');
|
|
||||||
|
|
||||||
// 初始化动画状态
|
|
||||||
animations.forEach(anim => {
|
|
||||||
anim.beginElement();
|
|
||||||
});
|
|
||||||
|
|
||||||
// 开始动画
|
|
||||||
function startAnimation() {
|
|
||||||
animations.forEach(anim => {
|
|
||||||
anim.beginElement();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 暂停动画
|
|
||||||
function pauseAnimation() {
|
|
||||||
animations.forEach(anim => {
|
|
||||||
anim.pauseElement();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 重置动画
|
|
||||||
function resetAnimation() {
|
|
||||||
animations.forEach(anim => {
|
|
||||||
anim.endElement();
|
|
||||||
setTimeout(() => anim.beginElement(), 100);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 调整SVG大小以适应背景图
|
|
||||||
window.addEventListener('load', () => {
|
|
||||||
const background = document.getElementById('background-map');
|
|
||||||
const mapContainer = document.querySelector('.map-container');
|
|
||||||
svg.setAttribute('width', background.offsetWidth);
|
|
||||||
svg.setAttribute('height', background.offsetHeight);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
6
dsLightRag/XingJun/svg.svg
Normal file
6
dsLightRag/XingJun/svg.svg
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g id="Layer_1">
|
||||||
|
<title>Layer 1</title>
|
||||||
|
<path id="svg_1" 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" stroke="#000" fill="#CE7975"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 633 B |
1
dsLightRag/XingJun/箭头.txt
Normal file
1
dsLightRag/XingJun/箭头.txt
Normal file
@@ -0,0 +1 @@
|
|||||||
|
https://editor.method.ac/
|
||||||
Reference in New Issue
Block a user