和Javascript代码：

    var cursor;
    var width,height;
    var testSVG = {
        x: 0,y: 0,id: 0,image: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Small_Flag_of_the_United_Nations_ZP.svg/488px-Small_Flag_of_the_United_Nations_ZP.svg.png",width: 280,height: 140
    };
    var svgContainer = d3.select("#MainDiv").append("svg").attr({
        width: 1920,height: 1080,version: 1.1,xmlns: "http://www.w3.org/2000/svg",viewBox: "-40,-40,2000,1160","class": "GraphicDesigner"
    });

    createSVG(svgContainer,testSVG);

    function createSVG(container,object) {
        var d = [{
            x: object.x,y: object.y,moveX: object.x,movey: object.y
        }];
        var svgObjectGroup = container.data(d).append("g").attr("transform",function (d) {
            return "translate(" + d.x + "," + d.y + ")";
        }).call(onDragDrop(dragmove,dropHandler))
          .attr("id",object.ID).attr("class","masterTooltip");
        svgObjectGroup.append("svg").attr({
            width: object.width,height: object.height,viewBox: "0," + object.width + "," + object.height
        }).append("svg:image")
          .attr({
              preserveAspectRatio: "none",width: object.width,"xlink:href": object.image
          });
        var dragSize = 16;
        svgObjectGroup.append("rect").attr({
            x: object.width - dragSize,y: object.height - dragSize,width: dragSize,height: dragSize,rx: 0,fill: "#FFFFFF",stroke: "black","stroke-width": 1,cursor: "se-resize","class": "sizers"
        });
    }

    function onDragDrop(dragHandler,dropHandler) {
        var drag = d3.behavior.drag();
        drag.on("drag",dragHandler).on("dragstart",startHandler).on("dragend",dropHandler);
        return drag;
    }

    function startHandler() {
        cursor = "se";
        d3.event.sourceEvent.stopPropagation();
        if (d3.event.sourceEvent.srcElement.attributes.cursor != undefined) cursor = d3.event.sourceEvent.srcElement.attributes.cursor.nodeValue; //Todo. Doesn't work in IE
    }

    function dragmove() {
        if (cursor != null) {
            if (cursor.startsWith("se")) {
                //South-East
                d3.select(this)[0][0].firstChild.height.baseVal.value = d3.select(this)[0][0].firstChild.height.baseVal.value + d3.event.dy;
                d3.select(this)[0][0].firstChild.width.baseVal.value = d3.select(this)[0][0].firstChild.width.baseVal.value + d3.event.dx;
            }
            var sizers = d3.selectAll(".sizers");
            sizers.remove();
            if (d3.select(this)[0][0].firstChild.height.baseVal.value < 1) d3.select(this)[0][0].firstChild.height.baseVal.value = 1;
            if (d3.select(this)[0][0].firstChild.width.baseVal.value < 1) d3.select(this)[0][0].firstChild.width.baseVal.value = 1;
            height = d3.select(this)[0][0].firstChild.height.baseVal.value;
            width = d3.select(this)[0][0].firstChild.width.baseVal.value;
        }
    }

    function dropHandler() {
        d3.selectAll("svg").remove();
        svgContainer = d3.select("#MainDiv").append("svg").attr({
            width: 1920,"class": "GraphicDesigner"
        });
        d3.select(this).style("cursor","default");
        testSVG = {
            x: 0,width: width,height: height
        };
        createSVG(svgContainer,testSVG);
    }

我这里也有一个jsfiddle：http://jsfiddle.net/Family/zvrfp3oL/

注意：此代码在Internet Explorer中不起作用,适用于Chrome,Edge和Firefox.

如果我尝试通过单击并拖动右下方框来调整图像大小,则释放鼠标按钮时图像会正确调整大小.但是,是否有一种方法可以在拖动图像时正确显示图像.实际上,当它试图保持纵横比时,看起来好像x和y坐标正在移动.