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

我在SVG中有一个定义clipPath的路径。将绘制线（记号标记）并将其剪裁到路径

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

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

问题代码示例：

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

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

因此（正如您所发现的），剪切路径似乎忽略了元素的

转换属性。如果在创建元素时正确应用变换，则即使没有动画，也可以看到这种情况发生：

.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)" );​

.enter（）
.附加（“行”）
.attr（“transform”、“translate（0,30）”）/因此（如您所发现的），剪切路径似乎忽略了元素的
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)" );​

.enter（）
.附加（“行”）
.attr（“transform”、“translate（0,30）”）/最好使用单个剪辑路径，只需将
剪辑路径上移到容器
g
元素即可：

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

前者（移动组）不适用于我的用例，但y1、y2的动画效果很好。谢谢剪辑路径不会忽略
变换
属性，它只是默认为
用户空间使用
坐标系（该坐标系恰好受到
变换
的影响）。看，前一个（移动组）不适用于我的用例，但是y1，y2的动画效果很好。谢谢剪辑路径不会忽略
变换
属性，它只是默认为
用户空间使用
坐标系（该坐标系恰好受到
变换
的影响）。请参阅。将此设置为答案，即使@meetamit的答案有效。这个解决方案有点简单。将此设置为答案，即使@meetamit的答案有效。这个解决方案简单一点。