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

【问题标题】：How can I apply a clip-path after/during animation?如何在动画之后/期间应用剪辑路径？
【发布时间】：2012-11-22 10:01:48
【问题描述】：

我在 SVG 中有一个路径定义了一个 clipPath。线条（刻度线）被绘制并剪裁到路径。

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

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

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

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

相关sn-ps：

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 可以是任何东西。

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

【问题讨论】：

标签： svg d3.js

【解决方案1】：

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

http://jsfiddle.net/dxZyq/

【讨论】：

将此设置为答案，即使@meetamit 的答案有效。这个解决方案稍微简单一些。

【解决方案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/

【讨论】：

前者（移动组）不适用于我的用例，但 y1,y2 的动画效果很好。谢谢！
clip-path 不会忽略transform 属性，它只是默认为userSpaceOnUse 坐标系（恰好受transform 影响）。见w3.org/TR/SVG11/…。