小编RTM*_*RTM的帖子

我正在尝试将 svg-clippath 与 d3.js 和缩放行为一起使用。以下代码创建一个矩形，然后将由矩形剪切区域对其进行剪切。

<svg class="chart"></svg>
<script>

var width = 800;
var height = 600;

var svg = d3.select(".chart")
        .attr("width", width)
        .attr("height", height)
        .append("g");

var clip = svg.append("defs")
    .append("clipPath")
    .attr("id","clip")
    .append("rect")
    .attr("width",200)
    .attr("height",200)
    .attr("x",100)
    .attr("y",100);


var zoom = d3.behavior.zoom().
    on("zoom",zoomed);

function zoomed(){
    container.attr("transform", "translate(" + d3.event.translate
    +")scale(" + d3.event.scale + ")");
    container.attr("clip-path","url(#clip)");
}

    svg.call(zoom);

var container = svg.append("g")
    .attr("clip-path","url(#clip)");

var rect = container.append("rect")
    //.attr("clip-path","url(#clip)")
    .attr("class","bar")
    .attr("x",150)
    .attr("y",150)
    .attr("width",350)
    .attr("height",350);

</script>

我想要的是在缩放/移动后再次应用剪切（这样我就无法将矩形移出剪切区域，现在我可以毫无问题地执行此操作。）我该怎么做？

我假设当前的行为是由于在转换之前应用剪辑而引起的。