那些遇到过的问题

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

Pie*_*rre 5 html css svg

我有一个由 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;
}
Run Code Online (Sandbox Code Playgroud) 
<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 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" class="imageOnTop"></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" style="width: 20px; position: absolute; top: 15px; left: 25px;" /></div>
Run Code Online (Sandbox Code Playgroud)

以下是问题的更新，并提出了通过以下方式执行此操作的解决方案 <defs><pattern ...><image ...>

谢谢@景贤！！

这是通过 CSS 显示图像而不重复的解决方案：（宽度必须与多边形宽度匹配）

.imageOnTop {
  fill:orange;
  fill:url(#img1);
  stroke:black;
}
Run Code Online (Sandbox Code Playgroud) 
<div id="main">
    <div id="mapBody">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="300" height="150">
        <defs>
          <pattern id="img1" patternUnits="userSpaceOnUse" width="34px" height="34px">
            <image href="https://i.ibb.co/0XGwpPz/resource-bison.png" x="4px" y="-5px" width="34px" height="34px" />
          </pattern>
        </defs>
            <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="orange" stroke="rgb(83,126,162)" stroke-width="1" class="imageOnTop"></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://i.ibb.co/0XGwpPz/resource-bison.png" style="width: 30px; position: absolute; top: 11px; left: 22px;" /></div>
Run Code Online (Sandbox Code Playgroud)

但仍然存在一个问题：如果图像以这种方式显示，多边形的背景颜色就会消失（尽管 PNG 是透明的）。

MXDVL 提出：在模式中添加一个矩形。

但是该矩形出现在图像上方，而不是下方。另外，我有 30 种不同颜色的六边形和 39 种不同的图像作为叠加添加。这意味着要定义 1000 多个模式。：/

.imageOnTop {
  fill:orange;
  fill:url(#img1);
  stroke:black;
}
Run Code Online (Sandbox Code Playgroud) 
<div id="main">
    <div id="mapBody">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="300" height="150">
        <defs>
          <pattern id="img1" patternUnits="userSpaceOnUse" width="34px" height="34px">
          
            <image href="https://i.ibb.co/0XGwpPz/resource-bison.png" x="4px" y="-5px" width="34px" height="34px" />
            <rect width="20" height="20" fill="orange">
          </pattern>
        </defs>
            <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="orange" stroke="rgb(83,126,162)" stroke-width="1" class="imageOnTop"></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://i.ibb.co/0XGwpPz/resource-bison.png" style="width: 30px; position: absolute; top: 11px; left: 22px;" /></div>
Run Code Online (Sandbox Code Playgroud)

结果 在此处输入图片说明

Bra*_*ell 2

其他一些解决方案走在正确的轨道上。<pattern>您需要做的就是使用您想要的填充颜色添加另一个图层。您可以将此颜色设为静态并在 SVG/HTML 或 CSS 中显式定义它。

如果您想要更大的灵活性，而不是添加<rect>到<pattern>，您可以将每个多边形与重复的多边形分组，将第一个用于background-color，第二个用于图案fill。这允许所有这些属性（stroke、stroke-opacity、fill等）独立存在。在此#2解决方案中，我还添加了preserveAspectRatio="xMidYMid slice"和<pattern>来确保背景图像始终居中，而无需每次手动设置x和y以使填充图像居中。

对于解决方案#2，请向下滚动。

1. 添加静态填充颜色<pattern>（下面的#2）

.imageOnTop {
  fill: url(#img1);
  stroke: #000;
}
Run Code Online (Sandbox Code Playgroud) 
<div id="main">
    <div id="mapBody">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="300" height="150">
        <defs>
          <pattern id="img1" patternUnits="userSpaceOnUse" width="34px" height="34px">
            <rect width="100%" height="100%" fill="orange" />
            <image href="https://i.ibb.co/0XGwpPz/resource-bison.png" x="4px" y="-5px" width="34px" height="34px" />
          </pattern>
        </defs>
            <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="orange" stroke="rgb(83,126,162)" stroke-width="1" class="imageOnTop"></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>
Run Code Online (Sandbox Code Playgroud)

2. 将多边形分组以独立分离填充颜色和填充图像

.imageOnTop {
  --blink-color: orange;
  --animation-duration: 0.75s;
}
.imageOnTop > polygon:first-child {
  animation: blink-fill ease-in-out var(--animation-duration) infinite alternate both;
}
.imageOnTop > polygon:last-child {
  fill: url(#img1);
  animation: blink-stroke ease-in-out var(--animation-duration) infinite alternate both;
}
@keyframes blink-fill {
  from { fill: var(--start-color) }
    to { fill: var(--blink-color) }
}
@keyframes blink-stroke {
  from { stroke-opacity: 0 }
    to { stroke-opacity: 1 }
}
Run Code Online (Sandbox Code Playgroud) 
<div id="main">
  <div id="mapBody">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="300" height="150">
      <defs>
        <pattern id="img1" x="0" y="0" width="1" height="1" viewBox="0 0 30 36" preserveAspectRatio="xMidYMid slice">
          <image width="30" height="36" xlink:href="https://i.ibb.co/0XGwpPz/resource-bison.png"/>
        </pattern>
      </defs>
      <g class="imageOnTop" style="--blink-color: #f0f">
        <polygon points="0,90 15,81 30,90 30,108 15,117 0,108" fill="rgb(150,183,243)" stroke="rgb(255,255,255)" stroke-opacity="0.5" stroke-width="1" style="--start-color: rgb(150,183,243)" />
        <polygon points="0,90 15,81 30,90 30,108 15,117 0,108" fill="rgb(150,183,243)" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="1" />
      </g><g>
        <polygon points="30,90 45,81 60,90 60,108 45,117 30,108" fill="rgb(83,126,162)" stroke="rgb(255,255,255)" stroke-opacity="0.5" stroke-width="1" style="--start-color: rgb(83,126,162)" />
        <polygon points="30,90 45,81 60,90 60,108 45,117 30,108" fill="rgb(83,126,162)" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="1" />
      </g><g>
        <polygon points="60,90 75,81 90,90 90,108 75,117 60,108" fill="rgb(83,126,162)" stroke="rgb(255,255,255)" stroke-opacity="0.5" stroke-width="1" style="--start-color: rgb(83,126,162)" />
        <polygon points="60,90 75,81 90,90 90,108 75,117 60,108" fill="rgb(83,126,162)" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="1" />
      </g><g>
        <polygon points="90,90 105,81 120,90 120,108 105,117 90,108" fill="rgb(83,126,162)" stroke="rgb(255,255,255)" stroke-opacity="0.5" stroke-width="1" style="--start-color: rgb(83,126,162)" />
        <polygon points="90,90 105,81 120,90 120,108 105,117 90,108" fill="rgb(83,126,162)" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="1" />
      </g><g class="imageOnTop" style="--blink-color: #0f0">
        <polygon points="120,90 135,81 150,90 150,108 135,117 120,108" fill="rgb(83,126,162)" stroke="rgb(255,255,255)" stroke-opacity="0.5" stroke-width="1" style="--start-color: rgb(83,126,162)" />
        <polygon points="120,90 135,81 150,90 150,108 135,117 120,108" fill="rgb(83,126,162)" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="1" />
      </g><g>
        <polygon points="150,90 165,81 180,90 180,108 165,117 150,108" fill="rgb(83,126,162)" stroke="rgb(255,255,255)" stroke-opacity="0.5" stroke-width="1" style="--start-color: rgb(83,126,162)" />
        <polygon points="150,90 165,81 180,90 180,108 165,117 150,108" fill="rgb(83,126,162)" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="1" />
      </g><g>
        <polygon points="180,90 195,81 210,90 210,108 195,117 180,108" fill="rgb(83,126,162)" stroke="rgb(255,255,255)" stroke-opacity="0.5" stroke-width="1" style="--start-color: rgb(83,126,162)" />
        <polygon points="180,90 195,81 210,90 210,108 195,117 180,108" fill="rgb(83,126,162)" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="1" />
      </g><g>
        <polygon points="210,90 225,81 240,90 240,108 225,117 210,108" fill="rgb(83,126,162)" stroke="rgb(255,255,255)" stroke-opacity="0.5" stroke-width="1" style="--start-color: rgb(83,126,162)" />
        <polygon points="210,90 225,81 240,90 240,108 225,117 210,108" fill="rgb(83,126,162)" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="1" />
      </g><g>
        <polygon points="15,63 30,54 45,63 45,81 30,90 15,81" fill="rgb(150,183,243)" stroke="rgb(255,255,255)" stroke-opacity="0.5" stroke-width="1" style="--start-color: rgb(150,183,243)" />
        <polygon points="15,63 30,54 45,63 45,81 30,90 15,81" fill="rgb(150,183,243)" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="1" />
      </g><g>
        <polygon points="45,63 60,54 75,63 75,81 60,90 45,81" fill="rgb(83,126,162)" stroke="rgb(255,255,255)" stroke-opacity="0.5" stroke-width="1" style="--start-color: rgb(83,126,162)" />
        <polygon points="45,63 60,54 75,63 75,81 60,90 45,81" fill="rgb(83,126,162)" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="1" />
      </g><g>
        <polygon points="75,63 90,54 105,63 105,81 90,90 75,81" fill="rgb(83,126,162)" stroke="rgb(255,255,255)" stroke-opacity="0.5" stroke-width="1" style="--start-color: rgb(83,126,162)" />
        <polygon points="75,63 90,54 105,63 105,81 90,90 75,81" fill="rgb(83,126,162)" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="1" />
      </g><g>
        <polygon points="105,63 120,54 135,63 135,81 120,90 105,81" fill="rgb(83,126,162)" stroke="rgb(255,255,255)" stroke-opacity="0.5" stroke-width="1" style="--start-color: rgb(83,126,162)" />
        <polygon points="105,63 120,54 135,63 135,81 120,90 105,81" fill="rgb(83,126,162)" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="1" />
      </g><g>
        <polygon points="135,63 150,54 165,63 165,81 150,90 135,81" fill="rgb(83,126,162)" stroke="rgb(255,255,255)" stroke-opacity="0.5" stroke-width="1" style="--start-color: rgb(83,126,162)" />
        <polygon points="135,63 150,54 165,63 165,81 150,90 135,81" fill="rgb(83,126,162)" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="1" />
      </g><g>
        <polygon points="165,63 180,54 195,63 195,81 180,90 165,81" fill="rgb(83,126,162)" stroke="rgb(255,255,255)" stroke-opacity="0.5" stroke-width="1" style="--start-color: rgb(83,126,162)" />
        <polygon points="165,63 180,54 195,63 195,81 180,90 165,81" fill="rgb(83,126,162)" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="1" />
      </g><g>
        <polygon points="195,63 210,54 225,63 225,81 210,90 195,81" fill="rgb(83,126,162)" stroke="rgb(255,255,255)" stroke-opacity="0.5" stroke-width="1" style="--start-color: rgb(83,126,162)" />
        <polygon points="195,63 210,54 225,63 225,81 210,90 195,81" fill="rgb(83,126,162)" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="1" />
      </g><g>
        <polygon points="225,63 240,54 255,63 255,81 240,90 225,81" fill="rgb(83,126,162)" stroke="rgb(255,255,255)" stroke-opacity="0.5" stroke-width="1" style="--start-color: rgb(83,126,162)" />
        <polygon points="225,63 240,54 255,63 255,81 240,90 225,81" fill="rgb(83,126,162)" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="1" />
      </g><g>
        <polygon points="0,36 15,27 30,36 30,54 15,63 0,54" fill="rgb(83,126,162)" stroke="rgb(255,255,255)" stroke-opacity="0.5" stroke-width="1" style="--start-color: rgb(83,126,162)" />
        <polygon points="0,36 15,27 30,36 30,54 15,63 0,54" fill="rgb(83,126,162)" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="1" />
      </g><g>
        <polygon points="30,36 45,27 60,36 60,54 45,63 30,54" fill="rgb(83,126,162)" stroke="rgb(255,255,255)" stroke-opacity="0.5" stroke-width="1" style="--start-color: rgb(83,126,162)" />
        <polygon points="30,36 45,27 60,36 60,54 45,63 30,54" fill="rgb(83,126,162)" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="1" />
      </g><g>
        <polygon points="60,36 75,27 90,36 90,54 75,63 60,54" fill="rgb(83,126,162)" stroke="rgb(255,255,255)" stroke-opacity="0.5" stroke-width="1" style="--start-color: rgb(83,126,162)" />
        <polygon points="60,36 75,27 90,36 90,54 75,63 60,54" fill="rgb(83,126,162)" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="1" />
      </g><g>
        <polygon points="90,36 105,27 120,36 120,54 105,63 90,54" fill="rgb(83,126,162)" stroke="rgb(255,255,255)" stroke-opacity="0.5" stroke-width="1" style="--start-color: rgb(83,126,162)" />
        <polygon points="90,36 105,27 120,36 120,54 105,63 90,54" fill="rgb(83,126,162)" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="1" />
      </g><g>
        <polygon points="120,36 135,27 150,36 150,54 135,63 120,54" fill="rgb(83,126,162)" stroke="rgb(255,255,255)" stroke-opacity="0.5" stroke-width="1" style="--start-color: rgb(83,126,162)" />
        <polygon points="120,36 135,27 150,36 150,54 135,63 120,54" fill="rgb(83,126,162)" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="1" />
      </g><g>
        <polygon points="150,36 165,27 180,36 180,54 165,63 150,54" fill="rgb(83,126,162)" stroke="rgb(255,255,255)" stroke-opacity="0.5" stroke-width="1" style="--start-color: rgb(83,126,162)" />
        <polygon points="150,36 165,27 180,36 180,54 165,63 150,54" fill="rgb(83,126,162)" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="1" />
      </g><g>
        <polygon points="180,36 195,27 210,36 210,54 195,63 180,54" fill="rgb(83,126,162)" stroke="rgb(255,255,255)" stroke-opacity="0.5" stroke-width="1" style="--start-color: rgb(83,126,162)" />
        <polygon points="180,36 195,27 210,36 210,54 195,63 180,54" fill="rgb(83,126,162)" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="1" />
      </g><g class="imageOnTop">
        <polygon points="210,36 225,27 240,36 240,54 225,63 210,54" fill="rgb(83,126,162)" stroke="rgb(255,255,255)" stroke-opacity="0.5" stroke-width="1" style="--start-color: rgb(83,126,162)" />
        <polygon points="210,36 225,27 240,36 240,54 225,63 210,54" fill="rgb(83,126,162)" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="1" />
      </g><g>
        <polygon points="15,9 30,0 45,9 45,27 30,36 15,27" fill="rgb(150,183,243)" stroke="rgb(255,255,255)" stroke-opacity="0.5" stroke-width="1" style="--start-color: rgb(150,183,243)" />
        <polygon points="15,9 30,0 45,9 45,27 30,36 15,27" fill="rgb(150,183,243)" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="1" />
      </g><g>
        <polygon points="45,9 60,0 75,9 75,27 60,36 45,27" fill="rgb(83,126,162)" stroke="rgb(255,255,255)" stroke-opacity="0.5" stroke-width="1" style="--start-color: rgb(83,126,162)" />
        <polygon points="45,9 60,0 75,9 75,27 60,36 45,27" fill="rgb(83,126,162)" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="1" />
      </g><g>
        <polygon points="75,9 90,0 105,9 105,27 90,36 75,27" fill="rgb(83,126,162)" stroke="rgb(255,255,255)" stroke-opacity="0.5" stroke-width="1" style="--start-color: rgb(83,126,162)" />
        <polygon points="75,9 90,0 105,9 105,27 90,36 75,27" fill="rgb(83,126,162)" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="1" />
      </g><g>
        <polygon points="105,9 120,0 135,9 135,27 120,36 105,27" fill="rgb(83,126,162)" stroke="rgb(255,255,255)" stroke-opacity="0.5" stroke-width="1" style="--start-color: rgb(83,126,162)" />
        <polygon points="105,9 120,0 135,9 135,27 120,36 105,27" fill="rgb(83,126,162)" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="1" />
      </g><g>
        <polygon points="135,9 150,0 165,9 165,27 150,36 135,27" fill="rgb(83,126,162)" stroke="rgb(255,255,255)" stroke-opacity="0.5" stroke-width="1" style="--start-color: rgb(83,126,162)" />
        <polygon points="135,9 150,0 165,9 165,27 150,36 135,27" fill="rgb(83,126,162)" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="1" />
      </g><g>
        <polygon points="165,9 180,0 195,9 195,27 180,36 165,27" fill="rgb(83,126,162)" stroke="rgb(255,255,255)" stroke-opacity="0.5" stroke-width="1" style="--start-color: rgb(83,126,162)" />
        <polygon points="165,9 180,0 195,9 195,27 180,36 165,27" fill="rgb(83,126,162)" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="1" />
      </g><g>
        <polygon points="195,9 210,0 225,9 225,27 210,36 195,27" fill="rgb(83,126,162)" stroke="rgb(255,255,255)" stroke-opacity="0.5" stroke-width="1" style="--start-color: rgb(83,126,162)" />
        <polygon points="195,9 210,0 225,9 225,27 210,36 195,27" fill="rgb(83,126,162)" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="1" />
      </g><g>
        <polygon points="225,9 240,0 255,9 255,27 240,36 225,27" fill="rgb(83,126,162)" stroke="rgb(255,255,255)" stroke-opacity="0.5" stroke-width="

归档时间：

查看次数：

213 次

最近记录：

4 年，8 月 前
响应网格的六边形 34
更多相关链接
相关归档
如何为HTML容器分配多个类？ 371
表单上的Javascript帖子提交打开一个新窗口 149
FontAwesome图标没有显示.为什么？ 104
剪辑/裁剪背景图像与CSS 67
页面中的多个表单或多个提交？ 57
如何为我的d3图表标题设置文字颜色？ 40
在CSS中使用负边距或填充是不好的做法 36
包含脚本,使用CDN(Google)或在网站的根目录中存储它们的速度有多快？ 26
如何在IE9中垂直居中SVG文本 21
需要加快我的SVG.我可以转换为WebGL或画布吗？ 9
难疑归档
如何在Web表单字段/输入标记上禁用浏览器自动完成？ 2680
如何克隆或复制列表？ 2289
检索HTML元素的位置(X,Y) 1418
为什么我需要一直做`--set-upstream`？ 1364
在JavaScript中修剪字符串？ 1285
如何让ASP.NET Web API使用Chrome返回JSON而不是XML？ 1220
获取数据库中所有表的大小 1180
哪些字符在CSS类名/选择器中有效？ 1171
如何加入(合并)数据框(内部,外部,左侧,右侧)？ 1155
NP,NP-Complete和NP-Hard有什么区别？ 1064
Copyright Info

© Copyright 2013-2021 admin@qa.1r1g.com

如未特别说明，本网站的内容使用如下协议:
Creative Commons Atution-NonCommercial-ShareAlike 4.0 International license.

用以下方式浏览
参考资料
回到顶部
网安备44200002443738
粤ICP备19038133号