Javascript SVG过滤器性能问题

使用混合模式和过滤器会导致奇怪的性能问题，因为过滤器偏离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>

这里可以看到一个最简单的例子：-当你将鼠标移向图像的右下角时，fps的下降幅度很大，在所有浏览器中都是一样的

有人有提高绩效的建议吗？或者，有人知道实现这种效果的不同方法吗

---

谢谢。

您的示例在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>

---

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

一种不太优雅但更跨浏览器的方法是使用可变不透明度覆盖div并使用javascript更改其位置。只是使用CSS

<img id="target" src="http://www.hexapolis.com/wp-content/uploads/2014/08/Stonehenge_curious_aspects_1.jpg"></img>
<div id="overflow-container">

   <div id="overlay"></div>
</div>

---

使用JavaScript更改叠加div的顶部/左侧。如果您想要多个聚光灯，则必须使用遮罩或编写具有多个聚光灯定义的过滤器。

在Chromium 32和Opera 12.16中对我很好，没有明显的水滴（合理规格pc）完全不在FF/Windows中为我运行如何使用您的模型创建多个聚光灯？创建两个聚光灯过滤器并合并它们。就像这样：虽然速度不是很快。

#target{
  position: absolute;
  left:0px;
  top: 0px;
}

#overflow-container {
  overflow: hidden;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 600px;
  width: 800px;
}

#overlay {
  position: absolute;
  top: -600px;
  left: -300px;
  height:1600px;
  width:1600px;
  -webkit-filter: blur(5px);

background: radial-gradient(ellipse at center, rgba(255,255,255,0) 0%,rgba(0,0,0,0) 5%,rgba(0,0,0,1) 15%,rgba(0,0,0,1) 100%); /* W3C */
}