基于SvelteKit与Tailwind的图片按钮动态重定位错位问题

问题核心是按钮定位未随图片/容器缩放实时适配，加上手动DOM创建的维护成本，导致视口变化时错位。可以通过以下几步修复：

1. 确保容器与图片比例一致 #

给.map-container设置固定宽高比，匹配图片原始尺寸（1579px/1194px≈1.322），避免图片缩放变形，让按钮的百分比定位始终对应图片上的区域：

.map-container {
  position: relative;
  max-width: 100%;
  aspect-ratio: 1579 / 1194;
}

.map-container img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 保持图片完整显示，也可根据需求用cover */
}

2. 用Svelte模板渲染按钮，替代手动DOM创建 #

放弃onMount里动态创建按钮的方式，直接在模板里用{#each}循环渲染，让Svelte自动管理元素，避免手动DOM操作的适配问题：

<div class="flex">
  <div class="map-container">
    <img src="../src/images/pdu-kitting-step.png" usemap="#image-map" id="map-image" alt="PDU Kitting" />
    <map name="image-map">
      {#each areas as area}
        <area shape={area.shape} coords={area.coords} href={area.href} alt={area.alt} />
      {/each}
    </map>
    <!-- 直接渲染按钮容器 -->
    {#each areas as area}
      <div 
        class="tooltip absolute group"
        data-tip={area.title}
        style={`
          left: ${area.left};
          top: ${area.top};
          width: ${area.width};
          height: ${area.height};
          ${area.shape === 'circle' ? 'border-radius: 50%;' : ''}
        `}
      >
        <button 
          class="btn variant-ghost pointer-events-auto group-hover:block hidden w-full h-full {area.shape !== 'circle' ? 'rounded-none' : ''}"
          on:click={() => passData(area)}
        />
      </div>
    {/each}
  </div>
  <div class="ml-16 flex-1">
    <SideData />
  </div>
</div>

3. 监听窗口resize，实时更新地图坐标 #

在onMount里添加resize事件监听，防抖后调用ImageMap更新地图坐标，确保原生地图区域也随图片缩放适配：

<script>
  import { onMount, onDestroy } from 'svelte';

  let areas = [
    // 你的areas数组内容保持不变
  ];
  let resizeTimeout;

  onMount(() => {
    // 初始化地图适配
    ImageMap('img[usemap]', 500);

    const handleResize = () => {
      clearTimeout(resizeTimeout);
      resizeTimeout = setTimeout(() => {
        ImageMap('img[usemap]', 500);
      }, 200);
    };

    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
      clearTimeout(resizeTimeout);
    };
  });

  function passData(area) {
    // 你的业务逻辑
  }
</script>

额外注意 #

检查你的areas数组，里面的对象没有coords属性，但原代码里用了area.coords.split，这会报错。如果原生地图的coords是必须的，需要给每个area对象补充正确的坐标值；如果不需要原生地图的交互，可以直接移除<map>和<area>部分，只用按钮实现交互。

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