如何在动画之后/期间应用剪辑路径？

Question

我在SVG中有一条定义clipPath的路径。绘制线条（刻度线）并剪切到路径。

当我执行线条动画时，它们会保留原始剪辑。我希望它们能够在动画的每个阶段被“重新剪辑”。

问题：是否有一种简单的方法可以在过渡期间执行剪辑？

示例问题代码： http://jsfiddle.net/Q29TA/

当你点击svg时，它会演示动画。

相关摘要：

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

我愿意接受新方法，但我不能硬编码重新计算行x1和x2的动画，因为clipPath可能是任何东西。

显示动画后果的示例图片（我希望水平线符合容器的蓝色对角线）：

Answer 1

最好使用单个剪辑路径，只需将clip-path移动到容器g元素：

http://jsfiddle.net/dxZyq/

Answer 2

所以（正如你所发现的那样）裁剪路径似乎忽略了元素'transform属性。你可以看到它也发生 - 即使没有动画 - 如果你在创建元素时应用你的变换：

.enter()
  .append( "line" )
  .attr( "transform", "translate(0,30)" )// <-- Same, "wrong" (i.e. undesired) clipping
  .attr( "x1", 0 ).attr( "x2", width )
  .attr( "y1", y ).attr( "y2", y )
  .attr( "class", "tick-marks" )
  .attr( "clip-path", "url(#myclip)" );​

从麻烦中，我发现围绕这个问题的一种方法是将所有需要移动和翻译的元素分组。你可以在这里看到它：http://jsfiddle.net/Q29TA/2/（注意，我只是翻译你创建的组，其中也有蓝色路径，所以它不太正确。）

绕过它的另一种方法是不应用变换，而是通过设置y1和y2的动画来移动线条：http://jsfiddle.net/Q29TA/1/