[英]hammer.js and SVG interactivity
我在使用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文件加載到html中,我可以使用SVG的“ onclick”事件來更改顏色,但鐵錘不會看到圓圈,也不會記錄“ svg拍子”。 它完美地記錄了上面的“ tap div”,因此錘子按預期工作。
一種替代方法是使用“ img src”標簽將svg文件加載到html中。 然后,我可以在對象上“錘擊”(記錄文本),但是顏色不會切換。
問題:我需要同時工作,錘擊多點觸控以及svg交互...是否還有另一種加載文件的方法,以便錘子可以與之交互並且SVG交互不會丟失? 感謝您的幫助:)
使用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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.