基于WebP地图的<area>坐标实现CSS悬停深色覆盖咨询

算力阿峰

2026-8-10

实现WebP地图区域悬停深色半透明效果（基于坐标）

需求背景

我正在制作奇幻地图项目，使用无损WebP格式的大地图。想要基于<area>标签的coords坐标制作CSS覆盖层，通过生成SVG实现仅在悬停对应区域时显示深色半透明效果。之前参考的教程都是基于SVG底图，但WebP转SVG工作量太大，现有HTML和CSS代码如下：

现有HTML代码

<div class="map">
      <img src="https://github.com/DylonKejhu/DylonKejhu.github.io/blob/main/resources/images/AurelisMap.webp" usemap="#image-map">
      <map name="image-map">
      <area target="" alt="DylonKejhu Union" title="DylonKejhu Union" href="/countries/dku.html" coords="3787,1099,3804,1126,3795,1183,3809,1223,3778,1263,3787,1298,3817,1303,3870,1347,3915,1351,3946,1338,3981,1316,4016,1320,4047,1307,4140,1276,4224,1294,4290,1303,4325,1303,4361,1289,4409,1272,4462,1267,4511,1232,4507,1188,4502,1161,4489,1099,4454,1068,4449,1033,4484,1007,4520,1007,4560,1015,4590,1020,4630,1011,4666,967,4696,958,4714,914,4776,861,4670,790,4643,773,4502,711,4462,715,4383,813,4325,816,4277,790,4228,790,4188,781,4162,746,4113,728,4074,728,4038,759,3954,834,3902,891,3857,900,3813,931,3774,953,3818,1010,3787,1046" shape="poly">
      </map>
</div>

现有CSS代码

.map {
     height: 750px;
     width: 100%;
     overflow: scroll;
     Border: 12px double black;
}

解决方案

无需将整个WebP转为SVG，只需在地图容器内添加SVG覆盖层，复用<area>的坐标即可实现悬停效果，步骤如下：

1. 修改HTML结构

在<img>和<map>之间添加SVG元素，用<polygon>复用<area>的coords作为points值：

<div class="map">
  <img src="https://github.com/DylonKejhu/DylonKejhu.github.io/blob/main/resources/images/AurelisMap.webp" usemap="#image-map">
  <!-- SVG覆盖层，用于悬停效果 -->
  <svg class="map-overlay">
    <polygon class="area-hover" points="3787,1099,3804,1126,3795,1183,3809,1223,3778,1263,3787,1298,3817,1303,3870,1347,3915,1351,3946,1338,3981,1316,4016,1320,4047,1307,4140,1276,4224,1294,4290,1303,4325,1303,4361,1289,4409,1272,4462,1267,4511,1232,4507,1188,4502,1161,4489,1099,4454,1068,4449,1033,4484,1007,4520,1007,4560,1015,4590,1020,4630,1011,4666,967,4696,958,4714,914,4776,861,4670,790,4643,773,4502,711,4462,715,4383,813,4325,816,4277,790,4228,790,4188,781,4162,746,4113,728,4074,728,4038,759,3954,834,3902,891,3857,900,3813,931,3774,953,3818,1010,3787,1046" />
  </svg>
  <map name="image-map">
    <area target="" alt="DylonKejhu Union" title="DylonKejhu Union" href="/countries/dku.html" coords="3787,1099,3804,1126,3795,1183,3809,1223,3778,1263,3787,1298,3817,1303,3870,1347,3915,1351,3946,1338,3981,1316,4016,1320,4047,1307,4140,1276,4224,1294,4290,1303,4325,1303,4361,1289,4409,1272,4462,1267,4511,1232,4507,1188,4502,1161,4489,1099,4454,1068,4449,1033,4484,1007,4520,1007,4560,1015,4590,1020,4630,1011,4666,967,4696,958,4714,914,4776,861,4670,790,4643,773,4502,711,4462,715,4383,813,4325,816,4277,790,4228,790,4188,781,4162,746,4113,728,4074,728,4038,759,3954,834,3902,891,3857,900,3813,931,3774,953,3818,1010,3787,1046" shape="poly">
  </map>
</div>

2. 更新CSS样式

调整容器定位，设置SVG覆盖层和悬停效果：

.map {
  height: 750px;
  width: 100%;
  overflow: scroll;
  border: 12px double black;
  position: relative; /* 让SVG覆盖层可以相对地图定位 */
}

/* SVG覆盖层：完全覆盖地图，点击穿透到下方area */
.map-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 区域样式：默认透明，允许悬停触发 */
.area-hover {
  fill: transparent;
  pointer-events: auto;
  transition: fill 0.3s ease; /* 平滑过渡效果 */
}

/* 悬停时显示深色半透明 */
.area-hover:hover {
  fill: rgba(0, 0, 0, 0.5);
}

关键说明

直接复用<area>的coords作为SVG<polygon>的points，无需额外坐标转换
pointer-events属性确保SVG不拦截<area>的点击跳转功能，同时能触发悬停样式
过渡动画让悬停效果更自然，可根据需求调整透明度(rgba最后一位)和过渡时长

内容的提问来源于stack exchange，提问作者DylonKejhu