Css 交互式图像-反应

我的用户应该能够将他们的大学地图上传到我的应用程序

之后，他到应用程序中的在线编辑器处选择一张与他们下载的大学地图匹配的图像

一旦激活编辑模式，他们可以单击4次以应用地图上的点A、B、C、D

这些点表示一个区域。该区域将显示在数据库中，当最终用户使用该应用程序时，他们将可以通过单击该区域访问大学地图。单击它，他们将可以访问其他信息

我真的不知道怎么做。我在SVG中找到了一些轨迹，但我不知道如何将SVG与以下事实联系起来：大学可以单击4次（对于点A、B、C、D），此后该区域将成为可单击的SVG

---

你有什么想法可以探讨吗？

我不确定我是否正确理解了你的问题

如果希望图像具有4个具有不同事件onClick的可单击区域，可以将此图像设置为ImageContainer的背景，将此容器的位置设置为“相对”，并添加位置为“绝对”和“onClick事件”的子级

对于您需要的每个图像，都有这些数据

    const image = {
      url: 'url',
      height: '1200px',
      width: '700px',
      clicableAreas: [
        {
          positionLeft: 50px,
          positionTop: 30px,
          width: 20px,
          height: 60px,
          onClick: () => doLogicAttachedToThisArea(),
        }
      ]
    }

此结构允许添加具有矩形可单击区域的图像

function ImageContainer(image) {
  return <div style={{ 
    backgroundImage: image.url,
    width: image.width,
    height: image.height,
    position: 'relative',
}}>
      {image.clicableAreas.map(e => <div 
         onClick={data.onClick} 
         style={{
           left: e.positionLeft,
           top: e.positionTop,
           width: e.width,
           height: e.height,
         }}
       /> )}
  </div>
}

函数ImageContainer（图像）{
返回
{image.clicableAreas.map（e=>）}
}