SVG: use image twice (filter transition)

Question

I want to use SVG filter feColorMatrix in a web page. Previously, I succeeded to make it work in both Firefox and Chrome (with the css attribute filter:url()). This, however, does not work in IE, which requires me to insert both the image and the SVG filter.

I am looking for a filter over an image which fades out or disappears when the image is hovered. I thought using the same image twice (one with filter, the other without), so I could make the filtered one disappear on hover, but have the unfiltered one still visible.

The problem is that the filter does not show anymore. Both images are unfiltered. My question is: what is wrong with the code I have so far? Is there a better solution for the effect I want to achieve?

Thanks in advance for the advice / pointers!

This is the code I have so far:

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>

---

Update

I think I'm getting there! Instead of putting two image tags in the SVG, I make two references to it by using the use tag. In addition, Michael pointed out z-index does not work. So instead, I put the filtered image latest in the DOM. Upon hovering the SVG, the filtered SVG will change in opacity, revealing the unfiltered image. Thanks for the pointer Michael! I'll accept your answer, as it points out the issue.

This is the code:

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 doesn't support z-indexing, unfortunately. Whatever you want on top has to be listed last in the DOM.