单击并拖动SVG，扩展到触摸支持

Question

我在HTML文档中内联创建了一个SVG图像。我正在尝试编写最少量的javascript以允许图像进行平移和缩放。我完全按照我想要的方式进行鼠标交互，但我很难通过触摸获得相同的行为。

移动项目的功能是

    startMove: function (evt) {
    this.move = true;
    this.x1 = evt.clientX;
    this.y1 = evt.clientY;
    var xScale = this.view[2]/this.svgElement.offsetWidth;
    var yScale = this.view[3]/this.svgElement.offsetHeight;
    this.scale = (yScale > xScale) ? yScale : xScale;
},
moveIt: function (evt) {
    if (this.move) {
        var dx = evt.clientX - this.x1;
        var dy = evt.clientY - this.y1;
        this.x1 = evt.clientX;
        this.y1 = evt.clientY;
        evt.ctrlKey ? this.zoom(Math.pow(2,-dy/100)) : this.pan(this.scale*dx, this.scale*dy);
    }
},
endMove: function (evt) {
    this.move = false
}

我将函数附加到svgManoeuvre.init（）中的事件处理程序，如下所示 transformGroup是应用变换矩阵以移动元素的svg组。

此代码适用于鼠标事件，但不适用于触摸事件，我缺少什么。我认为在平移交互的事件之间会有一个简单的类比。

到目前为止，我尝试过的唯一一款触摸设备是Windows手机。 查看此处的网页

http://www.londonlayout.co.uk/nav

this.transformGroup.addEventListener('mousedown',function (evt){
    svgManoeuvre.startMove(evt);
    },false);
    this.transformGroup.addEventListener('mousemove',function (evt){
    svgManoeuvre.moveIt(evt);
    },false); 
    this.transformGroup.addEventListener('mouseup',function (evt){
    svgManoeuvre.endMove(evt);
    },false); 
    this.transformGroup.addEventListener('touchstart',function (evt){
    svgManoeuvre.startMove(evt);
    },false);
    this.transformGroup.addEventListener('touchmove',function (evt){
    svgManoeuvre.moveIt(evt);
    },false); 
    this.transformGroup.addEventListener('touchend',function (evt){
    svgManoeuvre.endMove(evt);
    },false);