Creating a linear gradient SVG filter

Question

Essentially I'm trying to create an gradient alpha mask in using SVG and CSS (like this), and since the mask property is no longer on the standards track I'm exploring the filter route.

I've created a vertical alpha mask in Sketch, with the top being 0% #000000 and the bottom being 100% #000000, then exported it as an SVG and tweaked it using guidance from this O' Reilly article. It now looks like this:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <defs>
        <!-- Start by creating our vertical linear gradient -->
        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="alphaLinear">
            <stop offset="0%" style="stop-color: #000000; stop-opacity: 0%;" />
            <stop offset="100%" style="stop-color: #000000; stop-opacity: 100%;" />
        </linearGradient>

        <!-- Create a rectangle and apply the gradient as its fill -->
        <rect id="boxRect" x="0" y="0" width="100%" height="200" style="fill: url(#alphaLinear);" />

        <!-- Using that rectangle, we'll create a filter -->
        <filter id="alphaGrad">
            <feImage xlink:href="#boxRect" result="grad"/>
            <feDisplacementMap scale="10" xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" in2="grad"/>
        </filter>
    </defs>

    <use id="gradientBox" fill="url(#alphaGradient)" xlink:href="#boxRect"></use>

</svg>

My knowledge of SVG isn't the greatest so I'm suspecting this is where I've gone wrong.

Next, I applied the filter using filter (and -webkit-filter) along with referencing the filter ID #alphaGrad:

-webkit-filter: url('http://blahblah.com/alphagradient.svg#alphaGrad');

But, of course, this it doesn't work. Can anyone help me get the hang of this? Or is this even possible? If not, can someone recommend a method of how to achieve this?

Thanks in advance!

Update: here's a pretty basic fiddle of what I'm doing...

Answer 1

There are many errors and misconceptions in your example (why did you think a displacementMap would help you?)

Why don't you start from the code below - pure SVG using an SVG mask and an SVG image.

<svg width="600px" height="600px" viewbox="0 0 600 600">

    <defs>
        <linearGradient id="alphaLinear">
            <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0%" />
            <stop offset="100%" stop-color="#999999" stop-opacity="100%" />
        </linearGradient>

        <mask id="Mask">
            <rect x="0" y="0" width="600" height="600" fill="url(#alphaLinear)"  />
        </mask>

    </defs>

    <image xlink:href="http://upload.wikimedia.org/wikipedia/commons/7/71/Anadama_bread_(1).jpg" width="600" height="600" x="0" y="0" preserveAspectRatio="xMinYMin meet"     mask="url(#Mask)"/>

</svg>