Question

我想在网页中使用SVG过滤器feColorMatrix。以前，我成功地使它在Firefox和Chrome中都有效（使用css属性filter:url()）。但是，这在IE中不起作用，IE需要插入图像和SVG过滤器。

我正在寻找图像上的滤镜，当图像悬停时，该滤镜会淡出或消失。我想过两次使用相同的图像（一个使用过滤器，另一个没有过滤器），所以我可以使过滤后的图像在悬停时消失，但是未经过滤的图像仍然可见。

问题是过滤器不再显示。两张图片都未经过滤。我的问题是：到目前为止我的代码出了什么问题？对于我想要实现的效果，有更好的解决方案吗？

提前感谢您的建议/指示！

这是我到目前为止的代码：

的CSS：

svg {
    width:30%;
    float:left;
    overflow:hidden;
    height:300px;
}
svg image {
    position:absolute;
    left:0px;
}
svg .img1 {
    z-index:2;
}
svg .img2 {
    z-index:1;
}
svg:hover .img1 {
    opacity:0;
}

HTML：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMax slice" viewBox="0 0 662 1000">
    <defs>
        <filter id="sepiatone">
            <feColorMatrix values="0.3 0.4 0.2 0 0, 0.15 0.25 0.1 0 0, 0.05 0.2 0.1 0 0, 0 0 0 1 0" />
        </filter>
    </defs>
    <image xlink:href="/CMS/uploads/img/upload_2.jpg" class='img1' filter="url(#sepiatone)" width='662px' height='1000px' />
    <image xlink:href="/CMS/uploads/img/upload_2.jpg" class='img2' width='662px' height='1000px' />
</svg>

更新

我想我到了那里！我没有在SVG中放置两个image标记，而是使用use标记对其进行两次引用。此外，迈克尔指出z-index不起作用。因此，我将过滤后的图像放入DOM中。在悬停SVG时，过滤的SVG将改变不透明度，显示未过滤的图像。谢谢指针迈克尔！我会接受你的回答，因为它指出了问题。

这是代码：

HTML：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMax slice" viewBox="0 0 662 1000">
    <defs>
        <filter id="sepiatone">
            <feColorMatrix values="0.3 0.4 0.2 0 0, 0.15 0.25 0.1 0 0, 0.05 0.2 0.1 0 0, 0 0 0 1 0"></feColorMatrix>
        </filter>
        <g id="imgR">
            <image xlink:href="/CMS/uploads/img/upload_2.jpg" width='662px' height='1000px'></image>
        </g>
    </defs>
    <use xlink:href="#imgR" class='img2'></use>  
    <use xlink:href="#imgR" class='img1' filter="url(#sepiatone)"></use>
</svg>

CSS：

svg {
    width:30%;
    float:left;
    overflow:hidden;
    height:300px;
}
svg .img1, svg .img2 {
    position:absolute;
    left:0px;
    width:100%;
}
svg:hover .img1 {
    opacity:0;
}

Answer 1

遗憾的是，SVG并不支持z-indexing。无论你想要什么，都必须在DOM的最后列出。

SVG：使用图像两次（过滤器转换）

1 个答案: