0

首先，感谢开发并帮助维护 svg-pan-zoom 的人。这真的很有帮助。大道具:)

无论如何，我有一个关于 svg-pan-zoom 社区的快速问题。是否可以在其中包含 HTML div 的 svg 上使用 svg-pan-zoom （将在 foreignObject 中）？

我需要一个 HTML 元素（特别是表单）来“跟随”这个 svg 在平移和缩放时的移动。它相对于 svg 元素的位置不应该改变，它必须与它们一起移动。

我已经尝试过完全分开（单独的代码来控制 HTML 表单的平移），但它非常花哨，而且我遇到了一些我不想处理的技术问题。（例如，移动 div 不会移动 svg。）如果有人能告诉我 svg-pan-zoom 是否支持 foreignObjects，以及如何使用 svg 移动 HTML 元素，我将不胜感激。

提前致谢。

4

1 回答 1

0

为了跟进，我最终只是禁用了默认的缩放和平移选项，然后编写了一个函数来平移 svg 和表单元素，以便它们一起移动。

（其中一些代码的灵感来自另一个 Stack Exchange 答案，我曾短暂查找过该答案但无法再找到。如果我记得，我稍后会参考它。）

像大多数解决方案一样，以这种方式解决问题会带来更多问题。例如，表单可以完美地随鼠标移动，但由于某种原因，函数 panBy(xpixel, ypixel) 平移了太多（鼠标的微小移动会将其从页面中抛出。）

我想这是我的解决方案，尽管它有这个问题。我已经坚持了这么久，并且很感激有很多人可以帮助我弄清楚为什么 panBy 表现得很奇怪。

// Pan when mouse is dragged
$(window).on('mousedown', function(event){
    var initClick = {
        x : event.pageX,
        y : event.pageY
    };
    var initPosition = $('#form1').offset();
    var handlers = {
        mousemove : function(event){
            panZoom.panBy({x: event.pageX - initClick.x, y: event.pageY - initClick.y});
            $('#form1').css({"top": initPosition.top + (event.pageY - initClick.y),
                            "left": initPosition.left + (event.pageX - initClick.x)});
        },
        mouseup : function(event){
            $(this).off(handlers);   
        }
    };
    $(document).on(handlers);
});
于 2016-01-09T02:22:03.997 回答