如何在IE11中设置SVG滤镜的动画？

Question

I'm working specifically with IE11 (don't ask) so a solution doesn't have to work in any other browser. I have an SVG containing several images, on which I am applying several filters. One of them is a filter that darkens a given image. I can turn it on and off just fine, and alter the amount that the filter darkens, but I can't seem to get it to animate; instead the filter is applied without any time delay at the last assigned filter values (in this case, a slope of 0.5, which is halfway darkened).

Here's a simplified version of the svg:

<svg id="svgcanvas" width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">       
        <filter id="darkenMe">
            <feComponentTransfer>
                <feFuncR id="FR" type="linear" slope="1.0"></feFuncR>
                <feFuncG id="FG" type="linear" slope="1.0"></feFuncG>
                <feFuncB id="FB" type="linear" slope="1.0"></feFuncB>
            </feComponentTransfer>
        </filter>
        <image id="whatever" href="./images/whatever.png" y="0" x="0" width="200" height="200"></image>
</svg>

Here are the relevant JS functions:

function applySelectiveDarken(el) {
    var elementsToDarken = Array.prototype.slice.call(document.getElementsByClassName("elements-to-darken"),0);
    for (i = 0; i < elementsToDarken.length; i++) {
        if (elementsToDarken[i].id == el) {
            //skip, we just need to darken everything but this
        } else {
            elementsToDarken[i].setAttribute("filter","url('#darkenMe')");
        }
    }
    animateDarkenDown();
}

function DarkenDown(slopeR, slopeB, slopeG, slope) {
    slopeR.setAttribute("slope",slope);
    slopeG.setAttribute("slope",slope);
    slopeB.setAttribute("slope",slope);
 }

var timeoutID, timeout1, timeout2, timeout3, timeout4, timeout5;
function animateDarkenDown() {
    var slopeR = document.getElementById("FR");
    var slopeG = document.getElementById("FG");
    var slopeB = document.getElementById("FB");
    var slope = 1.0;

    // my first attempt
    /*for (i = 0; i < 5; i++) {
        timeout = window.setTimeout(DarkenDown(slopeR, slopeG, slopeB, slope), 100);
        slope = slope - 0.1;
    }*/

    //second attempt, also not working, behaves the same as above
    timeout1 = window.setTimeout(DarkenDown(slopeR, slopeG, slopeB, 0.9), 100);
    timeout2 = window.setTimeout(DarkenDown(slopeR, slopeG, slopeB, 0.8), 200);
    timeout3 = window.setTimeout(DarkenDown(slopeR, slopeG, slopeB, 0.7), 300);
    timeout4 = window.setTimeout(DarkenDown(slopeR, slopeG, slopeB, 0.6), 400);
    timeout5 = window.setTimeout(DarkenDown(slopeR, slopeG, slopeB, 0.5), 500);
}

document.getElementById("whatever").addEventListener("mouseover", function(e) {
    applySelectiveDarken("whatever");
});

I'm hoping it's something wrong with the timeout (and if there is a better approach, I'm interested. I can use jquery and other libraries, but I'd prefer native JS as the client is picky about passing PageSpeed Insights).

Answer 1

So part of the problem was the syntax of the setTimeout, but it also wasn't accepting an element as an argument (have no idea why). So I changed the logic a bit, and created 5 separate filters each with a different slope, and moved the loop that goes through all the images that need to have their filter changed into a helper function that gets called from a timeout. I then did five different timeouts (so it's not being overwritten). Here's the revised SVG:

<svg id="svgcanvas" width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <filter id="darkenMe">
        <feComponentTransfer>
            <feFuncR id="FR" type="linear" slope="1.0"></feFuncR>
            <feFuncG id="FG" type="linear" slope="1.0"></feFuncG>
            <feFuncB id="FB" type="linear" slope="1.0"></feFuncB>
        </feComponentTransfer>
    </filter>
    <filter id="darkenMe2">
        <feComponentTransfer>
            <feFuncR type="linear" slope="0.9"></feFuncR>
            <feFuncG type="linear" slope="0.9"></feFuncG>
            <feFuncB type="linear" slope="0.9"></feFuncB>
        </feComponentTransfer>
    </filter>
    <filter id="darkenMe3">
        <feComponentTransfer>
            <feFuncR type="linear" slope="0.8"></feFuncR>
            <feFuncG type="linear" slope="0.8"></feFuncG>
            <feFuncB type="linear" slope="0.8"></feFuncB>
        </feComponentTransfer>
    </filter>
    <filter id="darkenMe4">
        <feComponentTransfer>
            <feFuncR type="linear" slope="0.7"></feFuncR>
            <feFuncG type="linear" slope="0.7"></feFuncG>
            <feFuncB type="linear" slope="0.7"></feFuncB>
        </feComponentTransfer>
    </filter>
    <filter id="darkenMe5">
        <feComponentTransfer>
            <feFuncR type="linear" slope="0.6"></feFuncR>
            <feFuncG type="linear" slope="0.6"></feFuncG>
            <feFuncB type="linear" slope="0.6"></feFuncB>
        </feComponentTransfer>
    </filter>
    <image id="whatever" href="./images/whatever.png" y="0" x="0" width="200" height="200"></image>
</svg>

Here's the relevant JS:

function filterHelper(el,filter) {
    var elementsToChange = Array.prototype.slice.call(document.getElementsByClassName("apple-table"),0);
    for (i = 0; i < elementsToChange.length; i++) {
        if (elementsToChange[i].id == el) {
            //skip
        } else {
            elementsToChange[i].setAttribute("filter",filter);
        }
    }
}

var timeoutID, timeout1, timeout2, timeout3, timeout4, timeout5;

function applySelectiveDarken(el) {
    timeout1 = window.setTimeout(function() {
        filterHelper(el,"url('#darkenMe)");
    }, 50);
    timeout2 = window.setTimeout(function() {
        filterHelper(el,"url('#darkenMe2)");
    }, 100);
    timeout3 = window.setTimeout(function() {
        filterHelper(el,"url('#darkenMe3)");
    }, 150);
    timeout4 = window.setTimeout(function() {
        filterHelper(el,"url('#darkenMe4)");
    }, 200);
    timeout5 = window.setTimeout(function() {
        filterHelper(el,"url('#darkenMe5)");
    }, 250);
}

However, while this does what I want, it's fragile. For instance, if I want to change the number of steps in the transition I'm stuck making more timeouts and more filters. Is there a more efficient, less fragile approach?

Answer 2

Writing window.setTimeout(DarkenDown(slopeR, slopeG, slopeB, 0.9), 100); is like writing:

var result = DarkenDown(slopeR, slopeG, slopeB, 0.9);
window.setTimeout(result, 100);

You are calling DarkenDown then creating a timeout that will call nothing.

You have at least 2 solutions here. You can create a function that will call DarkenDown or use bind to define the value of the arguments:

window.setTimeout(function() { DarkenDown(slopeR, slopeG, slopeB, 0.9) }, 100);

Or

window.setTimeout(DarkenDown.bind(slopeR, slopeG, slopeB, 0.9), 100);