73 lines
2.3 KiB
HTML
73 lines
2.3 KiB
HTML
<!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;
|
|
}
|
|
|
|
.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 {
|
|
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>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="map">
|
|
<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)" />
|
|
</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>
|
|
|
|
</body>
|
|
</html> |