У меня есть SVG, который имеет черно-белое изображение.
И используя патчи с фоновыми изображениями, я хочу наложить цветные изображения поверх чёрно-белого изображения, чтобы при наведении курсора эти части изображения превращались в цветные.
Полный код SVG можно найти здесь
Я присваиваю background images
<style type="text/css">
#BosniaShape {
fill: url(#ColorPattern); /* похоже, не работает */
}
</style>
и
<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" />
и патч
<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
(и другие изображения) загружаются
Это меньшие вырезки основного изображения, но в цвете.
Изображения Здесь
Что я делаю неправильно?