我如何使snap.svg与svgpanzoom一起工作？

Question

我正在尝试使用svg图像文件制作场地的互动式座位图。

使用Snap.svg，我已经为每个座位（ajax脚本）添加了功能，并使用svgpanzoom库分别测试了平移和缩放。但是我同时需要两个功能。目前似乎无法使其正常工作。

svgpanzoom：就像这里http://ariutta.github.io/svg-pan-zoom/demo/object.html

<object id="venue-svg" type="image/svg+xml" data="svg/FB.svg" style="width: 500px; height: 500px; border:1px solid black; ">Your browser does not support SVG</object>
    <div class="controls">
      <button id="zoom-in">Zoom in</button>
      <button id="zoom-out">Zoom out</button>
      <button id="reset">Reset</button>
    </div>
<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/js/svg-pan-zoom.js"></script>
    <script>
      // Don't use window.onLoad like this in production, because it can only listen to one function.
      window.onload = function() {

    var panZoom = svgPanZoom('#venue-svg', {
          zoomEnabled: true,
          controlIconsEnabled: false
        });
...
    </script>

Snap.svg：

<div id="venue" width="800" height="640" ></div>
<script>
var s = Snap("#venue");

    Snap.load("svg/FB.svg", onSVGLoaded );

    function onSVGLoaded( svg ){ 
        layer0 = svg.select("#matrix-group");
        $.each(layer0.selectAll("path").items, function() {

            this.attr({
                origX:  this.attr('x'),
                origY:  this.attr('y'),
            });

            this.click(function() {
                alert('Ajax functionality');
            });

        });
        //show svg
        s.append( svg );
    }
</script>

我认为我应该先用Snap.svg加载svg，然后添加平移和缩放交互，但是当我尝试同时使用这两种方法时，svgpanzoom停止工作。