Question

在SVG容器内动态创建的SVG元素很少，可以自由拖动。如何仅在容器的高度和宽度范围内限制拖动？

脚本：

addEventListener('mousedown', mousedown, false);
var mx, my;
var dx, dy;
var mainsvg = document.getElementById('svg');
var selectedElement;
var eleTx, eleTy;

function getSvgCordinates(event) {

    var m = mainsvg.getScreenCTM();
    var p = mainsvg.createSVGPoint();

    var x, y;

    x = event.pageX;
    y = event.pageY;

    p.x = x;
    p.y = y;
    p = p.matrixTransform(m.inverse());

    x = p.x;
    y = p.y;

    x = parseFloat(x.toFixed(3));
    y = parseFloat(y.toFixed(3));

    return {x: x, y: y};
}

function mousedown(event) {
    if (event.target.id === 'arrow_t') {
        panning('up');
    }
    else if (event.target.id === 'arrow_b') {
        panning('down');
    }
    else  if (event.target.id.split('_')[0] === 'rect') {

        selectedElement = event.target;
        var translatexy = selectedElement.getAttribute('transform');
        translatexy = translatexy.split('(');
        translatexy = translatexy[1].split(',');

        eleTx = translatexy[0];
        translatexy = translatexy[1].split(')');
        eleTy = translatexy[0];

        eleTx = parseFloat(eleTx);
        eleTy = parseFloat(eleTy);

        var xy = getSvgCordinates(event);

        mx = xy.x;
        my = xy.y;

        mx = parseFloat(mx);
        my = parseFloat(my);

        addEventListener('mousemove', drag, false);
        addEventListener('mouseup', mouseup, false);
    }
}

function drag(event) {
    var xy = getSvgCordinates(event);
    dx = xy.x - mx;
    dy = xy.y - my;

    selectedElement.setAttribute('transform', 'translate(' + (eleTx + dx) + ',' + (eleTy + dy) + ')');
}
function mouseup(event) {

    removeEventListener('mousemove', drag, false);
    removeEventListener('mouseup', mouseup, false);
}

SVG Html：

 <div style="position: relative;top: 50px;left: 20px; width: 300px; height: 300px; background-color:  bisque">
    <svg version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="300" width="300" viewBox="0 0 300 300">
      <rect id="rect_1" x="0" y="0" width="50" height="50" fill="red" transform="translate(25,50)"/>
      <rect id="rect_2" x="0" y="0" width="50" height="20" fill="blue" transform="translate(225,150)" />
      <rect id="rect_3" x="0" y="0" width="80" height="30" fill="green" transform="translate(75,200)" />
   </svg>
</div>

限制SVG元素在SVG容器内拖动

0 个答案: