在D3中调整大小时，使用矩形边界裁剪SVG图像

在此jsFiddle中，我D3与结合使用interact.js，两者都在进行SVG。有一个包含矩形和图像的组。组类是可调整大小的，可以正常工作。问题在于，矩形在调整大小后应裁剪图像（即，图像永远不应超出矩形边界），但事实并非如此。我clipPath为此使用了D3 ，但是它不起作用。问题是什么？

var svg = d3.select("body")
            .append("svg")
            .attr("width", 500)
            .attr("height", 200);

var g = svg.append('g')
           .attr('class', 'resize-me');

var rect = g.append('rect')
    .attr('stroke', 'blue')
    .attr('x', 0)
    .attr('y', 0)
    .attr("width", 200)
    .attr("height", 200)
    .attr('stroke-width', 2)
    .attr('stroke', 'white')
    .attr('fill', 'grey');

var image = g.append('image')
      .attr('x', 0)
      .attr('y', 0)
      .attr('width', 128)
      .attr('height', 128)
      .attr("xlink:href", imageUrl);


interact('.resize-me')
    .resizable({
        edges: { left: true, right: true, bottom: true, top: true }
    })
    .on('resizemove', function(event) {

        var target = event.target;
        var rect = target.childNodes[0];
        var img = target.childNodes[1];

        var x = (parseFloat(target.getAttribute('endx')) || 0)
        var y = (parseFloat(target.getAttribute('endy')) || 0)

        rect.setAttribute('width', event.rect.width);
        rect.setAttribute('height', event.rect.height);

        x += event.deltaRect.left
        y += event.deltaRect.top
        rect.setAttribute('transform', 'translate(' + x + ', ' + y + ')')

        rect.setAttribute('endx', x)
        rect.setAttribute('endy', y)


        // clip image

        svg.append('defs')
           .append('clipPath')
           .attr('id', 'clip2')
           .append('rect')
           .attr('x', 0)
           .attr('y', 0)
           .attr('width', event.rect.width)
           .attr('height', event.rect.height);

        image.attr("clip-path", "url(#clip2)");

    });