Question

I have a path in SVG defining a clipPath. Lines (tick marks) are drawn and clipped to the path.

When I perform an animation of the lines, they retain the original clipping. I would like them to be ‘re-clipped’ at each stage of the animation.

Question: Is there an easy way to have the clipping performed during the transition?

Sample problem code:
http://jsfiddle.net/Q29TA/

When you click on the svg, it demonstrates the animation.

Relevant snippets:

d3.select( "#g-container" )
  .selectAll( "line" )
  .data( y.ticks( 10 ) )
  .enter()
    .append( "line" )
    .attr( "x1", 0 ).attr( "x2", width )
    .attr( "y1", y ).attr( "y2", y )
    .attr( "class", "tick-marks" )
    .attr( "clip-path", "url(#myclip)" );​

d3.select( "svg" )          
    .on("click", function() {
       d3.selectAll(".tick-marks")
          .transition().duration( 2500 )
          .attr( "transform", "translate(0,30)" )
    } )

I am open to new ways of doing this, but I can’t hardcode an animation that recomputes the line’s x1 and x2, since the clipPath could be anything.

Sample picture showing the aftermath of animation (I want the horizontal lines to meet the blue, diagonal line of the container):

Answer 1

It’s better to use a single clip-path, just move the clip-path up to the container g element instead:

http://jsfiddle.net/dxZyq/