mobile - ズームやパン中にsvgが消えるのを避けるには?

Question

私は、hammer.js の助けを借りて、モバイル デバイス用のズーム可能なマップを作成しようとしています: http://www.informatik.uni-bremen.de/~hhappe/visuHappe/SvgPan.html (モバイル デバイスの Opera で試してください) ）。現在 img-Tags で埋め込んでいる SVG ファイルを使用して、次の例を再作成していました: https://github.com/EightMedia/hammer.js/blob/master/examples/pinchzoom.html

この例は JPG ファイルで完全に機能していますが、私の場合、SVG (MapGartendeck.svg) は、モバイル デバイスでの最初のタッチ ジェスチャの後に部分的に消えます (残念ながら、今のところ Opera でしか機能しません..しないでください)。理由を知っている）。パン中に SVG 境界がずれているように見えます。私はすでに SVG をさまざまな方法 (オブジェクト タグと svg タグ) で埋め込もうとしましたが、問題は解決しません。さらに悪化し、タッチがまったく機能しません...

問題を解決する方法を知っている人はいますか？私のコードの要点: ...

#pinchzoom {
        -webkit-transform: translate3d(0,0,0);
        overflow: hidden;
    }

... 本体内:

<div id="pinchzoom" align="center">

        <img id="theSvgElement" src="MapGartendeck.svg" alt="" width="639.86" height="400.12" viewport="-639.86 -400.12 639.855 400.117">
        <!-- /*Try out other ways to embed svg:*/
        <iframe height="450px" width="95%" src="MapGartendeck.svg" scrolling="no">            
        <img id="theSvgElement" src="MapGartendeck.png" alt="MapGartendeck.png" width="689px" height="430.95px" left:"2.5px" />
        </iframe>

        <object id="theSvgElement" data="MapGartendeck.svg" type="image/svg+xml" width="95%" left="2.5px" style="display:block"></object>
        -->

    </div>

...

<script>     
 var hammertime = Hammer(document.getElementById('pinchzoom'), {
    transform_always_block: true,
    transform_min_scale: 1,
    drag_block_horizontal: true,
    drag_block_vertical: true,
    drag_min_distance: 0
});

var svg = document.getElementById('theSvgElement');

var posX=0, posY=0,
    lastPosX=0, lastPosY=0,
    scale=1, last_scale,
    rotation= 1, last_rotation,
    dt=0;

hammertime.on('touch drag transform dragend doubletap', function(ev) {
    switch(ev.type) {
        //rotate should be left out

        case 'touch':
            last_scale = scale;
            //last_rotation = rotation;
            break;

        case 'drag':
            if(scale > 1){
            posX = ev.gesture.deltaX + lastPosX; 
            posY = ev.gesture.deltaY + lastPosY; 
            }
            break;

        case 'transform':
            //rotation = last_rotation + ev.gesture.rotation;
            scale = Math.max(1, Math.min(last_scale * ev.gesture.scale, 10));
            break;

        case 'dragend':
            lastPosX = posX;
            lastPosY = posY;
            break;

        case 'doubletap':
            if (dt == 0){
                dt=1;
                scale = 2;
            }else if (dt ==1){
                dt = 0;
                scale = 1;
                posX=0;
                posY=0;
            }last_scale = scale;
            //last_rotation = rotation;
            break;
    }

    // transform!
    var transform =
            "translate3d("+posX+"px,"+posY+"px, 0) " +
            "scale3d("+scale+","+scale+", 0) "; 
            //+ "rotate("+rotation+"deg) ";


    theSvgElement.style.transform = transform;
    theSvgElement.style.oTransform = transform;
    theSvgElement.style.msTransform = transform;
    theSvgElement.style.mozTransform = transform;
    theSvgElement.style.webkitTransform = transform;

});