Javascript svg平移缩放平移/缩放到任何对象

我正在使用svg平移缩放代码来制作某种svg映射，现在是时候在单击事件上添加一个功能来平移和缩放svg的艺术组件了。但是，我不确定如何使用panBy（）函数来获取所需的svg艺术项目：我尝试在我要平移的组上使用getBBox（），并将其与panZoomInstance.getPan（）和getSizes（）信息一起使用，但我的实验没有成功。

---

我想完成与他们的示例相同的动画之王（），但将视口置于项目的中心。

尽管有各种可能，我还是能够理解其中的这一部分

function customPanByZoomAtEnd(amount, endZoomLevel, animationTime){ // {x: 1, y: 2}
  if(typeof animationTime == "undefined"){
      animationTime =   300; // ms
  }
  var animationStepTime = 15 // one frame per 30 ms
    , animationSteps = animationTime / animationStepTime
    , animationStep = 0
    , intervalID = null
    , stepX = amount.x / animationSteps
    , stepY = amount.y / animationSteps;

  intervalID = setInterval(function(){
    if (animationStep++ < animationSteps) {
      panZoomInstance.panBy({x: stepX, y: stepY})
    } else {
      // Cancel interval
      if(typeof endZoomLevel != "undefined"){
        var viewPort = $(".svg-pan-zoom_viewport")[0];
        viewPort.style.transition = "all " + animationTime / 1000 + "s ease";
        panZoomInstance.zoom(endZoomLevel);
        setTimeout(function(){
            viewPort.style.transition = "none";
            $("svg")[0].style.pointerEvents = "all"; // re-enable the pointer events after auto-panning/zooming.
                    panZoomInstance.enablePan();
                    panZoomInstance.enableZoom();
                    panZoomInstance.enableControlIcons();
                    panZoomInstance.enableDblClickZoom();
                    panZoomInstance.enableMouseWheelZoom();
        }, animationTime + 50);
      }
      clearInterval(intervalID)
    }
  }, animationStepTime)
}

function panToElem(targetElem) {

    var initialSizes = panZoomInstance.getSizes();
    var initialLoc = panZoomInstance.getPan();
    var initialBounds = targetElem.getBoundingClientRect();
    var initialZoom = panZoomInstance.getZoom();
    var initialCX = initialBounds.x + (initialBounds.width / 2);
    var initialCY = initialBounds.y + (initialBounds.height / 2);

    var dX = (initialSizes.width / 2) - initialCX;
    var dY = (initialSizes.height / 2) - initialCY;

  customPanByZoomAtEnd({x: dX, y: dY}, 2, 700);
}

函数customPanByZoomAtEnd（数量、endZoomLevel、animationTime）{/{x:1，y:2}
if（typeof animationTime==“未定义”）{
animationTime=300；//毫秒
}
var animationStepTime=15//每30毫秒一帧
，animationSteps=animationTime/animationStepTime
，animationStep=0
，intervalID=null
，stepX=amount.x/animationSteps
，stepY=数量。y/动画步骤；
intervalID=setInterval（函数（）{
if（animationStep++

关键在于计算来自

panZoomInstance.getSizes（）

的视口宽度和高度中心与目标元素的客户端边界矩形中心之间的差值

现在的问题是尝试制作动画缩放。现在，我已经让它在平移动画结束时使用命令缩放到指定位置，并设置一些css使缩放平滑过渡。css在一段时间间隔后被删除，因此正常的缩放和平移不会受到影响。在我尝试将缩放设置为步进动画时，它似乎总是缩放到预期的最大点