0

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

显示动画后果的示例图片（我希望水平线与容器的蓝色对角线相交）： 在此处输入图像描述

4

2 回答 2

2

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

http://jsfiddle.net/dxZyq/

于 2012-12-05T10:42:58.973 回答
1

因此（正如您所发现的），剪切路径似乎忽略了元素的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和：http y2: //jsfiddle.net/Q29TA/1/

于 2012-12-04T18:31:50.763 回答