我在使用 hammer.js 和 SVG 文件时遇到问题。似乎 svg 不会对锤子的输入使用react。这是我在代码示例中缩小的问题:
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>
使用“object”标签将 svg 文件加载到 html 中,我可以使用 SVG 的“onclick”事件来更改颜色,但是 hammer 看不到圆圈并且不会记录“svg tap” ”。不过,它完美地记录了上面的“tap div”,所以 hammer 按预期工作。
另一种方法是使用“img src”标签将 svg 文件加载到 html 中。然后,我可以“锤击”对象(它记录文本),但颜色不会切换。
问题:我需要同时工作,hammer-multitouch 和 svg-interactivity...是否有另一种加载文件的方法,以便 hammer 可以与其交互并且 SVG-interactivity 不会丢失? 感谢您的帮助:)
最佳答案
使用 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>
关于javascript - hammer.js 和 SVG 交互,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24913733/