JS Svg Pan Zoom无法正常工作

Question

我正在尝试使用此library来实现SVG平移缩放。

这是我的代码：

HTML：

<div class="container">
    <svg>...</svg>
</div>
<div class="controls">
    <button id="zoom-in">+</button>
    <button id="zoom-out">-</button>
    <button id="reset">r</button>
    <button id="activate"  onclick="clickf()">activate</button>
</div>

JavaScript的：

function clickf() {
    var $section = $('svg');
    var $pz = $section.panzoom();
    document.getElementById('zoom-in').addEventListener('click', function (ev) {
        ev.preventDefault()
        $pz.panzoom("zoom");

    });
    document.getElementById('zoom-out').addEventListener('click', function (ev) {
        ev.preventDefault()
        $pz.panzoom("zoom", true);
    });
    document.getElementById('reset').addEventListener('click', function (ev) {
        ev.preventDefault()
        $pz.panzoom("reset");
    });  
}

似乎Zoom工作正常，但Pan没有。我不明白为什么。有人有一些建议吗？