如何在没有div的情况下通过css将图像放在内联svg之上？

html5 • • 问答

我有一个由 javascript 生成并内嵌在 HTML 页面中的 svg。在一些六边形（SVG 中定义的多边形）的顶部（上方，更高的 z-index）我想显示一个图像。

我能够添加一个 div，其中包含具有 css 绝对位置和顶部/左侧/宽度（以像素为单位）的图像。

但是，对于我必须显示的数据，这意味着为 39 个不同的图像添加 473 div（大约 10k 中的 473 个多边形需要一个图像、74 行和 134 列十六进制）。图像代表世界地图，六角形可以有大约 40 种不同的颜色。你可以在这里看到它。

我想知道是否有解决方案可以使该图像出现在十六进制顶部，最好是在 svg 或 css 中？喜欢为多边形添加一个类，还是一个样式？

我曾尝试为多边形添加样式并为其提供背景图像，将图像包含在多边形内，但多边形的颜色优先于顶部。

这是代码：

  • 由于 div 解决方案，第一行的第一个多边形上面有一个图像
  • 第二行的最后一个多边形，CSS 将颜色更改为橙​​色，但未能在橙色顶部添加图像（甚至使用 fill:none ！？）

.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>
    <div>
        <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 30,108" fill="rgb(83,126,162)" stroke="rgb(83,126,162)" stroke-width="1"></polygon>
            <polygon points="60,90 75,81 90,90 90,108 75,117 60,108" fill="rgb(83,126,162)" stroke="rgb(83,126,162)" stroke-width="1"></polygon>
            <polygon points="90,90 105,81 120,90 120,108 105,117 90,108" fill="rgb(83,126,162)" stroke="rgb(83,126,162)" stroke-width="1"></polygon>
            <polygon points="120,90 135,81 150,90 150,108 135,117 120,108" fill="rgb(83,126,162)" stroke="rgb(83,126,162)" stroke-width="1"></polygon>
            <polygon points="150,90 165,81 180,90 180,108 165,117 150,108" fill="rgb(83,126,162)" stroke="rgb(83,126,162)" stroke-width="1"></polygon>
            <polygon points="180,90 195,81 210,90 210,108 195,117 180,108" fill="rgb(83,126,162)" stroke="rgb(83,126,162)" stroke-width="1"></polygon>
            <polygon points="210,90 225,81 240,90 240,108 225,117 210,108" fill="rgb(83,126,162)" stroke="rgb(83,126,162)" stroke-width="1"></polygon>
            <polygon points="15,63 30,54 45,63 45,81 30,90 15,81" fill="rgb(150,183,243)" stroke="rgb(150,183,243)" stroke-width="1"></polygon>
            <polygon points="45,63 60,54 75,63 75,81 60,90 45,81" fill="rgb(83,126,162)" stroke="rgb(83,126,162)" stroke-width="1"></polygon>
            <polygon points="75,63 90,54 105,63 105,81 90,90 75,81" fill="rgb(83,126,162)" stroke="rgb(83,126,162)" stroke-width="1"></polygon>
            <polygon points="105,63 120,54 135,63 135,81 120,90 105,81" fill="rgb(83,126,162)" stroke="rgb(83,126,162)" stroke-width="1"></polygon>
            <polygon points="135,63 150,54 165,63 165,81 150,90 135,81" fill="rgb(83,126,162)" stroke="rgb(83,126,162)" stroke-width="1"></polygon>
            <polygon points="165,63 180,54 195,63 195,81 180,90 165,81" fill="rgb(83,126,162)" stroke="rgb(83,126,162)" stroke-width="1"></polygon>
            <polygon points="195,63 210,54 225,63 225,81 210,90 195,81" fill="rgb(83,126,162)" stroke="rgb(83,126,162)" stroke-width="1"></polygon>
            <polygon points="225,63 240,54 255,63 255,81 240,90 225,81" fill="rgb(83,126,162)" stroke="rgb(83,126,162)" stroke-width="1"></polygon>
            <polygon points="0,36 15,27 30,36 30,54 15,63 0,54" fill="rgb(83,126,162)" stroke="rgb(83,126,162)" stroke-width="1"></polygon>
            <polygon points="30,36 45,27 60,36 60,54 45,63 30,54" fill="rgb(83,126,162)" stroke="rgb(83,126,162)" stroke-width="1"></polygon>
            <polygon points="60,36 75,27 90,36 90,54 75,63 60,54" fill="rgb(83,126,162)" stroke="rgb(83,126,162)" stroke-width="1"></polygon>
            <polygon points="90,36 105,27 120,36 120,54 105,63 90,54" fill="rgb(83,126,162)" stroke="rgb(83,126,162)" stroke-width="1"></polygon>
            <polygon points="120,36 135,27 150,36 150,54 135,63 120,54" fill="rgb(83,126,162)" stroke="rgb(83,126,162)" stroke-width="1"></polygon>
            <polygon points="150,36 165,27 180,36 180,54 165,63 150,54" fill="rgb(83,126,162)" stroke="rgb(83,126,162)" stroke-width="1"></polygon>
            <polygon points="180,36 195,27 210,36 210,54 195,63 180,54" fill="rgb(83,126,162)" stroke="rgb(83,126,162)" stroke-width="1"></polygon>
            <!-- LOOK AT THIS ONE --> <polygon points="210,36 225,27 240,36 240,54 225,63 210,54" fill="black" stroke="rgb(83,126,162)" stroke-width="1"></polygon> <!-- LOOK AT THIS ONE -->
            <polygon points="15,9 30,0 45,9 45,27 30,36 15,27" fill="rgb(150,183,243)" stroke="rgb(150,183,243)" stroke-width="1"></polygon>
            <polygon points="45,9 60,0 75,9 75,27 60,36 45,27" fill="rgb(83,126,162)" stroke="rgb(83,126,162)" stroke-width="1"></polygon>
            <polygon points="75,9 90,0 105,9 105,27 90,36 75,27" fill="rgb(83,126,162)" stroke="rgb(83,126,162)" stroke-width="1"></polygon>
            <polygon points="105,9 120,0 135,9 135,27 120,36 105,27" fill="rgb(83,126,162)" stroke="rgb(83,126,162)" stroke-width="1"></polygon>
            <polygon points="135,9 150,0 165,9 165,27 150,36 135,27" fill="rgb(83,126,162)" stroke="rgb(83,126,162)" stroke-width="1"></polygon>
            <polygon points="165,9 180,0 195,9 195,27 180,36 165,27" fill="rgb(83,126,162)" stroke="rgb(83,126,162)" stroke-width="1"></polygon>
            <polygon points="195,9 210,0 225,9 225,27 210,36 195,27" fill="rgb(83,126,162)" stroke="rgb(83,126,162)" stroke-width="1"></polygon>
            <polygon points="225,9 240,0 255,9 255,27 240,36 225,27" fill="rgb(83,126,162)" stroke="rgb(83,126,162)" stroke-width="1"></polygon>
        </svg>
    </div>
</div>

<div><img src="https://www.gravatar.com/avatar/4bd89893bb55d58180443e45eca3163e?s=64&d=identicon&r=PG&f=1" /></div>
以上是如何在没有div的情况下通过css将图像放在内联svg之上？的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容