Question

使用混合模式＆amp;过滤器导致奇怪的性能问题，因为过滤器从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＆＃39; 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匹配。

Answer 2

不太优雅但更多跨浏览器的方法是使用可变不透明度叠加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>

和

#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 */
}

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

SVG过滤器性能问题

2 个答案: