SVG过滤器性能问题

使用混合模式&过滤器导致奇怪的性能问题，因为过滤器偏离0x0点。SVG过滤器性能问题

<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全能的下降，这似乎是在所有浏览器相同。

有没有人有提高性能的提示？另外，有没有人知道一种不同的方法来实现这种效果？

谢谢。

来源

2014-10-20 Jake Cattrall

适合我在铬32和Opera 12.16没有不明显的下降（合理的规格pc） – Ian 2014-10-20 14:03:16

在FF/windows中根本无法运行 – 2014-10-20 19:07:06

您的示例不适用于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的过滤器更简单地实现相同的手电筒效果。然而，照明滤波器的浏览器实现有点bug /不一致。

<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匹配。

来源

2014-10-21 07:35:56

我如何使用您的模型创建多个聚光灯？ – 2014-10-22 15:46:36

创建两个聚光灯过滤器并合并它们。像这样：http://jsfiddle.net/vxg3Lmxz/4/虽然它并不是很快。 – 2014-10-22 18:01:50

一个不太优雅，但更多的跨浏览器方式来做到这一点是使用变量不透明覆盖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更改顶部/离开覆盖股利。如果您需要多个聚光灯，则必须使用蒙版或编写具有多个聚光灯定义的过滤器。

来源

2014-10-22 16:56:13

SVG过滤器性能问题

回答

相关问题