0

ClipPathを定義するSVGのパスがあります。線（目盛り）が描画され、パスにクリップされます。

線のアニメーションを実行すると、元のクリッピングが保持されます。アニメーションの各段階で「再クリップ」してほしい。

質問：移行中にクリッピングを実行する簡単な方法はありますか？

問題コードの例：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)" )
    } )

私はこれを行うための新しい方法を受け入れていますが、clipPathは何でもかまいませんので、行のx1とx2を再計算するアニメーションをハードコーディングすることはできません。

アニメーションの余波を示すサンプル画像（水平線をコンテナの青い対角線に合わせたい）： ここに画像の説明を入力してください

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

いじり回してみると、この問題を回避する1つの方法は、移動する必要のあるすべての要素をグループ化し、グループだけを翻訳することです。http://jsfiddle.net/Q29TA/2/ （注：作成したグループを翻訳しているだけで、青いパスも含まれているため、正しくありません）。

それを回避するもう1つの方法は、変換を適用せず、代わりに、およびをアニメーション化して行を移動することy1です：http y2: //jsfiddle.net/Q29TA/1/

于 2012-12-04T18:31:50.763 に答える