I am trying to create a unique effect on an SVG image by overlaying color images on top of it through paths with background images. The goal is to make it appear as though parts of the image transition into color when hovered over.
If you want to see the full code for the svg, you can find it here.
The background images are declared in the following manner:
<style type="text/css">
#BosniaShape {
fill: url(#ColorPattern); /* not working */
}
</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, upon checking the result, it seems that the images are not positioned correctly. The colored cutouts like "bosnia.jpg" do load but appear offset from their intended location.
You can view the images here.
What could be causing this issue?