Estoy tratando de usar un svg-clippath con d3.js y el comportamiento del zoom. El siguiente código crea un rectángulo, que luego será recortado por una región de recorte rectangualar.

<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>

Lo que quiero es que el recorte se vuelva a aplicar después de hacer zoom / mover (para que no pueda mover el rectángulo fuera de la región de recorte, que ahora puedo hacer sin ningún problema). ¿Cómo hago eso?

Supongo que el comportamiento actual es causado por el hecho de que el recorte se aplica antes de la transformación.