Question

我专门使用IE11（不要问），因此解决方案不必在任何其他浏览器中工作。我有一个SVG包含几个图像，我正在应用几个过滤器。其中一个是使给定图像变暗的滤镜。我可以打开和关闭它，并改变过滤器变暗的量，但我似乎无法让它变为动画;相反，在最后指定的滤波器值上没有任何时间延迟地应用滤波器（在这种情况下，斜率为0.5，这是中途变暗）。

这是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>

以下是相关的JS功能：

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");
});

我希望暂停时出现问题（如果有更好的方法，我很感兴趣。我可以使用jquery和其他库，但我更喜欢本地JS作为客户端对传递PageSpeed Insights感到挑剔。

Answer 1

问题的一部分是setTimeout的语法，但它也没有接受一个元素作为参数（不知道为什么）。所以我稍微更改了逻辑，并创建了5个单独的过滤器，每个过滤器都有不同的斜率，并移动了遍历所有需要将其过滤器更改为从超时调用的辅助函数的图像的循环。然后我做了五次不同的超时（所以它没有被覆盖）。这是经过修订的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>

以下是相关的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);
}

然而，虽然这样做我想要的，但它很脆弱。例如，如果我想改变转换中的步骤数量，那么我就会陷入更多的超时和更多的过滤器。是否存在更有效，不易碎的方法？

Answer 2

写window.setTimeout(DarkenDown(slopeR, slopeG, slopeB, 0.9), 100);就像写作：

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

您正在调用DarkenDown，然后创建一个不会调用任何内容的超时。

这里至少有2个解决方案。您可以创建一个函数来调用DarkenDown或使用bind来定义参数的值：

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

或者

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

如何在IE11中为SVG过滤器设置动画？

2 个答案: