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>

Answer 2

Few remarks:

1. SVG (and CSS) opacity value is not percertentual range but 0.0 - 1.0 range.

2. Mentioned mask property appears to be just prefixed in Webkit and unprefixed in Gecko.

3. If your target environment is HTML + CSS, you might not necessarily need SVG: you could get similar effect using linear-gradient and RGBA background-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%); on some overlay (pseudo) element. pointer-events: none; could be useful then.