I have a SVG that has a black and white image.

And using patches with background images, I want to superimpose color images on top of a black and white image so that when you hover the cursor, these parts of the image turn into color.

The full SVG code can be found here.

I assign background images

 <style type="text/css"> #BosniaShape { fill: url(#ColorPattern); /* похоже, не работает */ } </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>

base image

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

and patch

 <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, it seems that the images are not in the right place.

bosnia.jpg (and other images) are loaded. These are smaller clippings of the main image, but in color.

Images Here

What am I doing wrong?

1 answer 1

You will need only two images - the map is gray and colored.

Attempting to have images of individual countries simply complicates the work.
Use ColorPattern all color version of the map and apply it to all forms of the country.

You did not specify the full path for your countries, so in the following example, I simply used the placeholder squares.

Hover your mouse over the rectangles to see the result.

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

  • one
    Works on the tablet .... - MaximLensky