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

在本文中，我将

D3

与

interactive.js

相结合，两者都使用

SVG

。有一个组包含一个rect和一个image。group类是可调整大小的，工作正常。问题是，当调整矩形大小时，它应该剪裁图像（即图像永远不应该超出矩形边框），但它不会。我使用了D3

clipPath

，但它不起作用。有什么问题

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)");

    });

---

是否希望图像始终展开以填充灰色框？（第12版用于图像扩展）

此外，每次触发事件时，您都会附加

标记：

它很快就失控了

您应该将

附加到某个虚拟的单元素数组数据并使用d3.js更新模式，或者更简单一些，您可以在源代码中创建

标记，并每次更新同一标记的属性

您可以在开始时执行一次：

var def = svg.append('defs')
           .append('clipPath')
           .attr('id', 'clip2')
           .append('rect')
           .attr('x', 0)
           .attr('y', 0)
           .attr('width', 200)
           .attr('height', 200);

然后使用此变量并在活动期间更新：

def.attr('x', 0)
           .attr('y', 0)
           .attr('width', event.rect.width)
           .attr('height', event.rect.height);

那你就避免这个问题

（第11版用于图像剪辑）

您是否希望这种行为：

当灰盒在一维中小于图像时，图像被剪裁

更新

由于OP注意到原始代码中的一个错误，导致灰盒总是至少恢复到图像的高度或宽度，所以我也尝试解决这个问题

然而，我也注意到一些奇怪的行为，即框的左上角不能再向上或向左延伸，因此我首先修复了该问题：

请参见OP提到的新行为和旧错误的.gif：

---

谢谢，我不希望图像扩大，我希望图像被剪裁，这样你的第二个答案就行了，尽管我找到了一个细节，如果你先向上移动底部边框直到图片的中间，然后向左移动右侧边框，底部边框会自动移动到图片的底部，你能给我看一下你所描述的内容的屏幕截图吗？我在这里看不到这种行为——请让我知道想要的行为到底是什么。截图也会有帮助。啊，也许我现在明白你的意思了。这就是你在代码中设置它的方式？我只修复了代码中的剪辑路径部分。请参阅-并注意拖动左上角时发生的行为等。如果您希望我也解决此问题，请修改您的问题，将其包括在内。请查看底部边框本身向上是的，您是对的，该行为已经存在于问题中