SVG фоновые изображения не в нужном месте

Question

У меня есть SVG, у которого есть черно-белое изображение, и, используя контуры с фоновыми изображениями, я хочу наложить поверх него цветные изображения, чтобы они выглядели так, как будто эти части изображения превращаются в цвета при наведении на них курсора.

Полный код для svg можно найти здесь .

Я объявляю фоновые изображения следующим образом:

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

и:

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

базовое изображение:

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

и пути:

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

Однако результатом является то, что изображения не кажутсябыть в нужном месте.bosnia.jpg (и другие изображения) загружаются.Они меньше по размеру основного изображения, но в цвете.

Вот изображения .

Что я делаю не так?

Answer 1

Если я правильно вас понимаю, вам понадобятся только два изображения.Карта серого и цветная карта.Попытка получить изображения отдельных стран просто усложняет задачу.

Просто попросите ColorPattern использовать полную цветную версию карты и использовать ее для всех фигур страны.

Вы не указали полные пути для своих стран, поэтому в следующем примере я просто использовал квадраты-заполнители.

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