SVG-平移-缩放平移/缩放到任何对象

Question

我正在使用 svg-pan-zoom 代码 https://github.com/ariutta/svg-pan-zoom 制作某种 svg 地图，现在是时候添加一个功能来平移和缩放到 svg 的艺术组件上点击事件。但是，我不确定如何使用 panBy(( 函数来获得所需的 svg 艺术项目：我尝试在我要平移到的组上使用 getBBox((，并将其与 panZoomInstance.getPan(( 和 getSizes(( 信息一起使用，但我的实验没有成功。 我想完成与他们的示例相同的动画之王(http://ariutta.github.io/svg-pan-zoom/demo/simple-animation.html(，但将视口居中到该项目。

Answer 1

尽管困难重重，我还是能够弄清楚这部分！

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);
}

关键在于计算视口宽度和高度的中心与panZoomInstance.getSizes()的客户端边界矩形中心之间的差异。

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