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

아무런 눈에 띄지 않는 방울 (알맞은 사양의 PC)이있는 Chromium 32 및 Opera 12.16에서 제대로 작동합니다. – Ian

이 FF/Windows에서 전혀 실행되지 않습니다. –

mousemove 이벤트에 e.offsetX 및 e.offsetY을 사용하고 있기 때문에 FF로 작동하지 않습니다. 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과 일치하도록 조정해야합니다.

출처

2014-10-21 07:35:56

모델에 여러 개의 스포트라이트를 만들 수 있습니까? –

두 개의 스포트라이트 필터를 만들고 병합합니다. 이렇게 : http://jsfiddle.net/vxg3Lmxz/4/ 정확히 빨리 아니에요. –

덜 우아하지만 더 많은 브라우저 간 방법은 가변 불투명 오버레이 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 */ 
}

를 사용하여 자바 스크립트

오버레이 DIV의 왼쪽 상단을/변경할 수 있습니다. 여러 개의 스포트라이트가 필요하다면 마스크를 사용하거나 여러 개의 스포트라이트 정의가있는 필터를 작성해야합니다.

출처

2014-10-22 16:56:13

SVG 필터 성능 문제

답변

관련 문제