CODEWITHSUNDEEP
csssvg
Flobin
Flobin

Reputation: 708

SVG background images not in right location

I have an SVG that has a black and white image, and using paths with background images I want to overlay color images on top of it, making it look like those parts of the image turn into color when you hover over them.

The full code for the svg can be found here.

I am declaring the background images like this:

<style type="text/css">
    #BosniaShape {
        fill: url(#ColorPattern); /* doesn't seem to work either */
    }
</style>

and:

<defs>
    <pattern id="BosniaPattern" x="0" y="0" width="4800" height="2720">
        <image xlink:href="bosnia.jpg" width="281" height="319" />             
    </pattern>
</defs>

the base image:

<image xlink:href="map_bw_2560.jpg" width="4800" height="2720" id="bw" />

and the paths:

<path id="BosniaShape" class="st0" d="M1227.5,448.5c-8.99-0.4-9-3-9-6s-5-5-6-10s-1.47-10.68-7.98-11.14s-11.44,1.4-12.56,3.91
…
C1234.43,442.38,1233.27,448.76,1227.5,448.5z"/>

However the result is that the images do not seem to be in the right location. The bosnia.jpg (and other images) do get loaded. They are smaller cutouts of the main image, but in color.

Here are the images.

What am I doing wrong?

Upvotes: 1

Views: 54

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101830

If I am understanding you correctly, you should only need two images. The greyscale map and the colour one. Trying to have images of individual countries is just making the job much harder for yourself.

Just have the ColorPattern use the whole coloured version of the map, and use it for all the country shapes.

You didn't include the full paths for your countries, so in the following example, I've just used placeholder squares.

<svg version="1.1" id="map" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 4800 2720">
<style type="text/css">
    .st0{
        stroke:#000000; /* so you can see them */
        stroke-width: 3px;
        transition: all 0.3s ease-in-out;
        opacity: 0.4;
        fill: url(#ColorPattern);
    }
    path:hover {
        opacity: 1;
    }
</style>
<defs>
    <pattern id="ColorPattern" patternUnits="userSpaceOnUse"
             x="0" y="0" width="4800" height="2720">
        <image xlink:href="https://i.imgur.com/cPCnxHa.jpg" width="4800" height="2720" />           
    </pattern>
</defs>

<image xlink:href="https://i.imgur.com/A0PPmdT.jpg" width="4800" height="2720" id="bw" />

<path id="SyriaContestedShape" class="st0" d="M400,400 h800 v800 h-800 Z"/>
<path id="YugoslaviaShape" class="st0" d="M2000,400 h800 v800 h-800 Z"/>
<path id="SyriaShape" class="st0" d="M3600,400 h800 v800 h-800 Z"/>
<path id="TurkeyShape" class="st0" d="M1200,1600 h800 v800 h-800 Z"/>
<path id="BosniaShape" class="st0" d="M2800,1600 h800 v800 h-800 Z"/>

</svg>

Upvotes: 2

Related Questions