我有一个由 javascript 生成并内嵌在 HTML 页面中的 svg。在一些六边形（SVG 中定义的多边形）的顶部（上方，更高的 z-index）我想显示一个图像。
我能够添加一个 div，其中包含具有 css 绝对位置和顶部/左侧/宽度（以像素为单位）的图像。
但是，对于我必须显示的数据，这意味着为 39 个不同的图像添加 473 div（大约 10k 中的 473 个多边形需要一个图像、74 行和 134 列十六进制）。图像代表世界地图，六角形可以有大约 40 种不同的颜色。你可以在这里看到它。
我想知道是否有解决方案可以使该图像出现在十六进制顶部，最好是在 svg 或 css 中？喜欢为多边形添加一个类，还是一个样式？
我曾尝试为多边形添加样式并为其提供背景图像，将图像包含在多边形内，但多边形的颜色优先于顶部。
这是代码：
.imageOnTop {
fill:orange;
stroke:black;
background-image: url('https://www.gravatar.com/avatar/4bd89893bb55d58180443e45eca3163e?s=64&d=identicon&r=PG&f=1');
background-size: contain;
z-index: -1;
position: relative;
}<div id="main">
<div id="mapBody">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="300" height="150">
<polygon points="0,90 15,81 30,90 30,108 15,117 0,108" fill="rgb(150,183,243)" stroke="rgb(150,183,243)" stroke-width="1"></polygon>
<polygon points="30,90 45,81 60,90 60,108 45,117 …