Question

我有一个具有黑白图像的SVG，并且使用带有背景图像的路径，我想将彩色图像叠加在其顶部，使它看起来像当您将鼠标悬停在其上时，图像的那些部分都变成彩色。

该svg的完整代码可以在here中找到。

我正在声明这样的背景图片：

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

但是the result是图像似乎不在正确的位置。 bosnia.jpg（和其他图像）确实已加载。它们是主图像的较小切口，但是是彩色的。

这里是the images。

我在做什么错了？

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>

SVG背景图像不在正确的位置

1 个答案: