Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

How to put an image on top of inline svg via css without div?

Tags:

html

css

svg

I have a svg generated by javascript and included inline in the HTML page. On top (above, higher z-index) of some hexes (polygons defined in SVG) I want to display an image.

I was able to do it adding a div containing the image with css position absolute and top/left/width in pixels.

But, with the data I have to display, that means adding 473 div for 39 different images (473 polygons out of ~10k need an image, 74 lines and 134 columns of hexes). The image represents the map of the world and the hexes can have about 40 different colors. You can see it here.

I was wondering if there was a solution to make that image appear on top of the hex, ideally in svg or in css? like adding a class to the polygon, or a style?

I have tried putting a style to a polygon and giving it a background-image, contain the image within the polygon, but the color of the polygon prevails on top.

Here is the code with:

  • the first polygon of the first line with an image over it thanks to the div solution
  • the last polygon of the second line with a CSS changing color into orange but failing to add an image on top of the orange (and even with 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>

Below is an update of the question with a solution proposed to do this via <defs><pattern ...><image ...>

Thanks @Jing-Xian!!

Here is the solution for the image to appear via CSS and not to repeat: (width has to match polygon width)

.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>

But one problem remains: if the image is displayed this way, the background color of the polygon disappears (despite the PNG being transparent).

Proposed by MXDVL: add a rect into the pattern.

But that rect appears above the image, not under. Plus I have 30 different colors for the hexes and 39 different images to add as overlay. That would mean more than 1000 pattern to be defined. :/

.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>

Result enter image description here

like image 208
Pierre Avatar asked Oct 15 '22 21:10

Pierre

1 Answers

Some of the other solutions were on the right track. All you need to do is to add another layer to your <pattern> with the fill color you want. You can make this color static and define it explicitly in the SVG/HTML or within the CSS.

If you'd like even more flexibility, rather than adding the <rect> to the <pattern>, you can group each polygon with a duplicate polygon, use the first for the background-color, and the second for the pattern fill. This allows all of those properties (stroke, stroke-opacity, fill, and more) independently. In this #2 solution, I've also added preserveAspectRatio="xMidYMid slice" to the <pattern> to ensure that the background image is always centered, without needing to manually set the x and y each time to recenter the fill image.

For solution #2, please scroll down.

1. Adding a static fill color to the <pattern> (#2 below)

.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. Grouping polygons to separate fill color and fill image independently

.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>
like image 113
Brandon McConnell Avatar answered Oct 18 '22 22:10

Brandon McConnell
Sign in to Comment

Related questions

Embedding Youtube Video in Email
Extract script contents with BeautifulSoup (4.9.0)
SGV Gradients Darker at Stops
CSS: Table - Row with colspan - change whole row color on hover
How to change icon color on hover?
How to prevent flutter web htmlelementview from catching touches from objects above it?
How to remove a class of all sibling elements when an element is clicked inside a jquery each loop
Laravel: How to store Excel File in a given path?
How to close down an hamburger menu after an anchor is clicked
How to change the default image (place holder) loaded in a TextView with Spanned via Html.fromHtml(text)
Limit top and bottom of a slider
I am curious as to how python is connected to websites [closed]
Material-UI: How to add border in TreeView
How to get the real width and height of element after rotating it?
Getting elements of a div from another page (PHP)
CSS percent height when parent has min/max height
IE7 ignores CSS attribute selector only on pages coming from production server
How to prevent flex-items from overflowing flex parent with no wrap?
CSS display none and opacity animation with keyframes not working
Changing <select> highlight color

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!