html - 如何在没有 div 的情况下通过 css 将图像放在内联 svg 之上?
问题描述
我有一个由 javascript 生成的 svg,并包含在 HTML 页面中。在一些十六进制(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 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>
以下是问题的更新,并提出了通过以下方式执行此操作的解决方案<defs><pattern ...><image ...>
谢谢@Jing-Xian!!
这是图像通过 CSS 显示而不重复的解决方案:(宽度必须与多边形宽度匹配)
.imageOnTop {
fill:orange;
fill:url(#img1);
stroke:black;
}
<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>
但是还有一个问题:如果图像以这种方式显示,多边形的背景颜色会消失(尽管 PNG 是透明的)。
MXDVL 提出:在模式中添加一个矩形。
但是该矩形出现在图像上方,而不是下方。另外,我有 30 种不同颜色的十六进制和 39 种不同的图像要添加为叠加层。这意味着要定义超过 1000 个模式。:/
.imageOnTop {
fill:orange;
fill:url(#img1);
stroke:black;
}
<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>
解决方案
其他一些解决方案正走在正确的轨道上。您需要做的就是<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;
}
<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>
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 }
}
<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="1" style="--start-color: rgb(83,126,162)" />
<polygon points="225,9 240,0 255,9 255,27 240,36 225,27" fill="rgb(83,126,162)" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="1" />
</g>
</svg>
</div>
</div>
推荐阅读
- android - Framework 7 V2:如何在 android 设备后退按钮中关闭弹出覆盖
- c# - DataGridView中的编辑控件移动到另一个单元格时如何接收事件?
- canvas - 当我使用 canvasPattern 作为 pointBackgroundColor 时,图像看起来很模糊
- android - 在android中的活动和服务之间共享类
- java - 使用 Step Builder 模式创建一个复杂对象,该对象包含一个实例变量,该实例变量是一个列表
- angular - 接口上不存在属性
- java - 使用 Apache POI 将多个图像插入 Excel 时,第一个图像被删除
- string - str::contains 适用于引用但不适用于实际值
- optaplanner - 如何以增量方式运行调度过程?
- android - HTML5 视频标签和 Android WebView,预加载不起作用