javascript - SVG 过滤器性能问题

Question

使用混合模式和滤镜会导致奇怪的性能问题，因为滤镜会偏离 0x0 点更远。

<filter id="flashlight-filter-0" x="0" y="-10%" width="4" height="3">
    <feOffset result="light0" in="SourceGraphic" dx="-105" dy="-100"></feOffset>
    <feOffset result="light1" in="SourceGraphic" dx="95" dy="100"></feOffset>
    <feBlend result="blend1" in="light0" in2="light1" mode="multiply"></feBlend>
</filter>

这里可以看到一个最小的例子:http://jsfiddle.net/vxg3Lmxz/ - 当您将鼠标移向图像的右下端时，请观察 fps 的大幅下降，这似乎在所有浏览器中都是一样的。

有人有提高性能的秘诀吗？或者，有人知道实现这种效果的其他方法吗？

谢谢。

Answer 1

您的示例在 FF 中不起作用，因为您在 mousemove 事件中使用了 e.offsetX 和 e.offsetY。最好使用jQuery的e.pageX和e.pageY，隐藏了浏览器事件对象之间的差异；

$('#flashlight-svg-0').mousemove(function(e) {
    var x, y;
    x = e.pageX;
    y = e.pageY;
    $('[result="light1"]').attr('dx', x);
    $('[result="light1"]').attr('dy', y);
});

一旦修复，它就可以在所有浏览器上正常工作。正如您所报告的那样，我没有看到任何明显的速度下降。

你做手电筒的方法很复杂。但我猜你这样做是为了跨浏览器的一致性？

使用带有 feDiffuseLighting 的滤镜，您可以更简单地实现相同的手电筒效果。然而，照明过滤器的浏览器实现有点错误/不一致。

    <filter id="flashlight-filter-0">
        <feDiffuseLighting surfaceScale="1" diffuseConstant="20"
                           lighting-color = "#ddd" result="diffOut">
            <feSpotLight id="spot"
                         x="400" y="400" z="1000"
                         pointsAtX="-400" pointsAtY="-400"
                         specularConstant="1"
                         limitingConeAngle="6"/>
        </feDiffuseLighting>
        <feComposite in="SourceGraphic" in2="diffOut" operator="arithmetic"
                      k1="1" k2="0" k3="0" k4="0"/>
    </filter>

Demo here .这在 Chrome 上运行良好，但在 FF 中看起来不同，需要进行一些调整以使其与 Chrome 匹配。