連続した線を水平方向と垂直方向にアニメーションする

Question

SVGパス/ラインの「描画」をアニメーション化（遷移）しようとしています。私が描きたい特定の線は、右に300px行き、100pxを下に、次に200pxを左に続けます。しかし、カーブやブレークのない単一の連続した線になります。

現在、私は、ラインを個別に構築し、トランジションを適用することで動作させることができます。 X1、Y1/X2、Y2 - 新しいX2、Y2への移行 - この遅延で、この遅延を繰り返し、繰り返す、そして繰り返す。

これを行う簡単な方法はありますか？たとえば、3つではなく1つのSVG要素を使用し、配列からX/Y座標を取り込むなどです。

具体的な例や一般的な方向を私に指摘していただければ幸いです。

おかげ

Answer 1

それはあなたが望む効果を得るために少し風変わりだが、これは、完全に可能です。これは、非常に大きなstroke-dash-array（実際にはパスの全長）を設定し、dash-offset（あなたのシェイプの長さにも）を設定します。これは、線が最初に目に見えない点に設定し、線が表示されるようにダッシュオフセットを変更します。

CSS Tricks SVG Line Animationには本当に良い記事があり、その原則が説明されています。

d3.selectAll(".draw") 
 
    .style("stroke-dasharray", function() { return this.getTotalLength(); }) 
 
    .style("stroke-dashoffset", function() { return this.getTotalLength(); }) 
 
    .transition() 
 
    .duration(3000) 
 
    .style("stroke-dashoffset", 0);

.draw { 
 
    fill: #232a29; 
 
    stroke: #232a29; 
 
    stroke-width: 2px; 
 
    fill-rule:nonzero; 
 
    fill-opacity:0; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<svg width="500" height="500"> 
 
    <g> 
 
     <g transform="translate(0,600)scale(1,-1)"> 
 
      <!-- Circle --> 
 
      <path class="draw circle" d="m 97.44,308.52 c 0,90.53 73.42,163.92 163.98,163.92 90.56,0 163.98,-73.39 163.98,-163.92 0,-90.53 -73.42,-163.92 -163.98,-163.92 -90.56,0 -163.98,73.39 -163.98,163.92 z" /> 
 
      </g> 
 
    </g> 
 
</svg>

ここ