hammer.js 和 SVG 交互性

Question

我在使用hammer.js 和SVG 文件时遇到问题。似乎 svg 对锤子的输入没有反应。这是我在代码示例中缩小的问题：

html-sn-p:

<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-sn-p:

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

使用“object”-tag 将 svg 文件加载到 html 中，我可以使用 SVG 的“onclick”事件来更改颜色，但锤子不会看到圆圈并且不会记录“svg tap” ”。它完美地记录了上面的“tap div”，所以锤子按预期工作。

另一种方法是使用“img src”标签将 svg 文件加载到 html 中。然后，我可以“锤击”对象（它记录文本），但颜色不会切换。

问题：我需要同时工作，hammer-multitouch 和 svg-interactivity... 是否有另一种加载文件的方法，以便hammer 可以与之交互并且 SVG 交互性不会丢失？ 谢谢你的帮助:)

Answer 1

使用 AJAX 加载器加载图片并将其内联。切记不要在图片加载前添加事件监听器。

这是一个使用 jQuery 的示例：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");
    });
});

注意：id为“mysvg”的标签声明方式如下：

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