hammer.js 및 SVG 상호 작용

Question

hammer.js 및 SVG 파일을 사용하는 데 문제가 있습니다. 그것은 svg가 망치로 입력에 반응하지 않는 것 같습니다. 여기 내 문제는 코드 예제에서 아래로 좁아 :

HTML - 조각 :

<div id="mydiv" style="background: blue"> 
    <h1>My div</h1> 
</div> 
<div> 
    <object id="mysvg" data="circle.svg"/> 
</div>  
<script> 
    var element_div = document.getElementById('mydiv'); 
    var element_svg = document.getElementById('mysvg'); 

    Hammer(element_div).on("tap", function(event){ 
     console.log("tap div"); 
    }); 

    Hammer(element_svg).on("tap", function(event){ 
     console.log("svg tap"); 
    }); 
</script> 

SVG-조각 :

<circle id="bubble" fill="black" stroke="#0000ff" cx="50" cy="50" r="50"> 
<set attributeName="fill" to="yellow" begin="click" /> 
</circle> 

SVG 파일을로드 "개체"-tag 사용 HTML로, 나는 SVG의 "onclick"이벤트를 사용하여 색상을 변경할 수 있지만 망치는 원을 보지 않고 "svg tap"을 기록하지 않습니다. 그것은 위의 "tap div"를 완벽하게 기록하기 때문에 망치는 의도 한대로 작동합니다.

대신 "img src"태그를 사용하여 svg 파일을 html로로드 할 수 있습니다. 그런 다음, 나는 (텍스트를 기록하는) 객체에서 "해머"할 수 있지만 색상은 전환되지 않습니다.

문제 : 해머 - 멀티 터치뿐만 아니라 svg-interactivity도 작동해야합니다 ... 해머가 상호 작용할 수 있도록 파일을로드하는 또 다른 방법이 있으며 SVG- 상호 작용이 손실되지 않습니까? Thx :

Answer 1

AJAX 로더를 사용하여 그림을로드하고 인라인으로 배치하십시오. 그림이로드되기 전에 이벤트 리스너를 추가하지 마십시오. http://jsfiddle.net/VPc9m/1/

$('#mysvg').load("https://rawgit.com/VengadoraVG/moving-to-gnulinux/master/img/tux.svg", 
function (response, status, xhr) { 
    Hammer(document.getElementById("layer1")).on("tap", function(event){ 
    alert("svg-layer1 tap"); 
    }); 

    Hammer(document.getElementById("path3889")).on("tap", function(event){ 
    alert("svg-path3889 tap"); 
    }); 
}); 

참고 : 여기에

는 jQuery를 사용하여 예입니다 ID가 "mysvg"로 태그 아래의 방법으로 선언 :

<div id="mysvg"> 
</div>