Question

我有一张互动地图。我正在尝试创建一个缩放和平移的脚本。只要SVG元素中没有任何图像，脚本就会正常工作。当我在其中放置图像时，它不再起作用，因为它选择图像并拖动它。如何禁用此功能？

这是jquery代码：

$(function(){
    var mouseX;
    var mouseY;
    var originX;
    var originY;
    var dX = 0;
    var dY = 0;
    var clicking = false;

    $(document).mousemove(function(e){
       mouseX = e.pageX; 
       mouseY = e.pageY;
    });  

    $('#P1').on({
        mousemove: function(){
            if(clicking == true){
                dX = originX - mouseX;
                dY = originY - mouseY;
            }
        },
        mousedown: function(){
            clicking = true;
            originX = mouseX;
            originY = mouseY;
        },
        mouseup: function(){
            clicking = false;
            transX = $('#mapSVG').data('transx')+dX;
            transY = $('#mapSVG').data('transy')+dY;
            $('#mapSVG').data('transx',transX);
            $('#mapSVG').data('transy',transY);
            $('#mapSVG image').attr('transform','translate('+transX+','+transY+')');
            $('#mapSVG polygon').attr('transform','translate('+transX+','+transY+')');
        }
    }, '#mapSVG');
});

这是svg：

<svg id="mapSVG" height="800" width="800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-transx="0" data-transy="0">';
    <image x="0" y="0" width="1600px" height="1600px" xlink:href="map.png" transform="translate(0,0"/>';
    <polygon points="703,600 704,593 711,588 722,581 739,574 753,571 769,576 771,583 774,586 785,585 790,595 791,607 781,610 780,615 782,624 769,631 751,636 739,640 737,635 721,640 712,633 706,624 704,613 " style="fill:lime; stroke:purple; stroke-width:1; opacity:0.3" transform="translate(0,0)"></polygon>
</svg>';

Answer 1

假设正确的SVG是

<svg id="mapSVG" height="800" width="800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-transx="0" data-transy="0">
    <image x="0" y="0" width="1600px" height="1600px" xlink:href="http://upload.wikimedia.org/wikipedia/commons/a/a6/Provinces_of_Sicily_map.png" transform="translate(0,0)"/>
    <polygon id="P1" points="703,600 704,593 711,588 722,581 739,574 753,571 769,576 771,583 774,586 785,585 790,595 791,607 781,610 780,615 782,624 769,631 751,636 739,640 737,635 721,640 712,633 706,624 704,613 " style="fill:lime; stroke:purple; stroke-width:1; opacity:0.3" transform="translate(0,0)"></polygon>
</svg>

带有更正的语法，<polygon>带有ID＆＃34; P1＆＃34; （如果我正确的话，请相应地编辑问题。）

如果#P1不是多边形，我的答案就不再有效了。最终我会迭代它。

我已经做了一个显然有用的笔，虽然用户故事并非100％清楚地告诉我：http://codepen.io/pioneerskies/pen/qEegbV我唯一能看到的问题是错误的事件委托：你是使用目标#P1将事件委派给#mapSVG，但您不能将父事件委托给其子节点之一，因为授权将会观察＆＃34;对于后代的事件。

有关事件委派的官方jQuery文档位于http://learn.jquery.com/events/event-delegation/

Jquery pan svg图片麻烦

1 个答案: