このsvgジェスチャー操作(拡大、縮小)

前章で述べたように、使用中にいくつかの問題が発生していることに気づきました.彼は本当のsvgを操作することはできません.svgの中の要素しか操作できません.
svg全体を操作するには、どのような属性があるかを知らなければなりません.ネット上では簡単な紹介があります.私はここでどのように解決するかだけを話しています.
svgにはviewBoxの要素があります.彼を修正すると、いくつかのものが見つかります.viewBox=0 400 400です.
このsvgに相当するキャンバスは400しかありません. 
viewBoxValues = svg.getAttribute('viewBox').split('');
修正viewBoxValues[0]viewBoxValues[1]が移動可能になり、viewBoxValues[3]がスケーリング可能になる

  hammertime.on("pinchin pinchout panstart panmove panend", function (ev) {
        switch (ev.type) {
            case "pinchin":
                zoom(ev.scale);
                break;
            case "pinchout":
                zoom(ev.scale);
                break;
            case "panstart":
                viewBoxValues = svg.getAttribute('viewBox').split(" ");
                circleX = parseInt(viewBoxValues[0]);
                circleY = parseInt(viewBoxValues[1]);
//                circle.setAttribute("fill","brown");
                break;
            case "panmove":
                viewBoxValues[0] = circleX -ev.deltaX ;  //ev.deltaX   X       ，          ，        
                viewBoxValues[1] =circleY - ev.deltaY;

                svg.setAttribute("viewBox",viewBoxValues.join(" "));
//                svg.setAttribute("y",moveY);
                break;
            case "panend":
//                circle.setAttribute("fill","red");
                break;
        }
    });
    /**
     * svg  
     * {Float} num      
     */
    var boxWidth = viewBoxValues[2];
    var boxHeight = viewBoxValues[2];
    function zoom(num) {

                viewBoxValues[2] =boxWidth /num;

        svg.setAttribute("viewBox",viewBoxValues.join(" "));
    }