Javascript 拆分a<；部门>；将一个图像填充成几个小的<；部门>；并使用html、css和js添加html元素

我有一张来自客户的座位图像。我用谷歌的图片来说明。

由于需求，我不能完全使用html元素从头开始设计它，而只能使用客户端的座位分布图像。图像的格式是svg，因此在窗口最大化的情况下不会丢失分辨率

我尝试做的是首先用图像作为背景填充

。在

中，我将其分为几个部分，如黄色部分和其他蓝色和白色背景部分。在黄色部分，我想添加一个组合框，其中有一个复选框列表和一个文本输入。如红色和绿色正方形的位置将替换为复选框

在未来扩展该项目。我们可能会得到不同类型的图像，每个图像都有不同的设计。我正在考虑将设计数据存储到

json

文件中，并根据需要加载该文件

让我困惑的是，是否有可能根据上述设计将一个

划分为几个

子-

。由于图像是svg，如何使切割适合更改浏览器（窗口）的大小

我在网上参考了一些座椅位置选择教程，但它们都是从头开始设计座椅的

---

我的设计有可能实现吗？有人能给我一些建议或告诉我应该遵循哪些技术吗？

一个

元素不能为您做这项工作吗？您可以将客户的图像作为div的背景，并测量每个座位相对于该图像的距离百分比-只要您以相同的单位测量所有内容，就无需担心比例问题。然后，当有人点击div时，你可以很容易地计算出他们在哪个座位（如果有的话），你就会知道它的尺寸。我不需要为每个座位设置一个元素，因为它太凌乱而且不需要。您可以使用可单击的

元素动态创建它，而不是

s。也许您将来想要的是一个基于svg图像创建

元素的程序。也许这样的事情已经存在了