为区域构建复杂的图像地图（颜色和图像填充）

我正在开发基于Web的“产品可视化工具”软件，该软件将向用户提供产品图形，允许用户选择不同的区域，这是任意大小和形状，图形和选择各种可用的颜色和图案。为区域构建复杂的图像地图（颜色和图像填充）

我打算让这个充满活力和可扩展性。我希望能够使用尽可能少的图形文件，仅使用基本图像（产品的照片或插图）以及用作填充/背景的各种纹理图像和颜色。

理想情况下，当客户想要添加额外的产品和选项时，我们只需要渲染额外的基础图像和其他纹理。否则，我们需要为每个可用区域和纹理的组合手动生成图形......您可以明显看出这会如何变得艰难和多余。

我发现很多jQuery插件，并与Image Mapster尝试，但没有出现能够：

这甚至可能（没有Flash），或者我需要采取手动生成的图形为所有可用的组合定位，对齐和分层？

使用html和css的组合将您的区域划分为基本区域并将背景图像设置为任何您想要的。

使用div的，使区域的每个基本产品。使用背景图像设置大格子的背景

如果您正确实施此操作，则应该能够为每个产品都拥有自己的div的“模块”，如果您使用正确的定位（类似“float：left”）

2015-06-19 18:17:38

问题是我需要的不仅仅是矩形区域。区域的形状需要完全任意，即：HTML图像地图多边形。 –

超越我。祝你好运！ –

看起来像一个可能的解决方案可能是使用SVGs：http://stackoverflow.com/questions/3796025/fill-svg-path-element-with-a-background-image –

回答