SVG線上の要素がアニメーション化可能です

SVG画像としてこの8つのループがあります。私は無限に8ループに沿ってアニメーション化する白の50ピクセルの長さの要素をアニメートすることに興味があります。SVG線上の要素がアニメーション化可能です

私は、SVGアニメーションはアニメーション化可能であることを理解していますが、この要素はSVGの行に無関係にどうやって到達できますか？これはCSSで達成するのにも合理的ですか？

ここ要素が従うべきSVGパスは次のとおり

ここ線を横切ってアニメーションとループべきSVG白要素の図です。

出典

2017-05-29 user3615851

質問を正しく理解していただきたいと思います。

はい、可能です。

以下のコード行を基に使用できます。私は

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>SVG 001</title> 
 
    <style> 
 
    body{font-family:"Calibri", sans-serif;} 
 
    svg{border:1px solid #eee;} 
 
    
 
    </style> 
 
</head> 
 
    <body> 
 
    <h1>Offset Dasharray</h1> 
 
    <svg id ="mySVG" width="500" height="500" viewBox="0 0 500 500"> 
 
    <path id="myPath" d="M 50 50 q 200 800 400 0" stroke="#ccc" 
 
    stroke-width="10" fill="none" /> 
 
    </svg> 
 
    <br> 
 
    <button onclick="dashAni(myPath, 50, 1500)">start</button> 
 
    <script> 
 
    var dashAni = function(path, length, duration){ 
 
     var dashPath = path.cloneNode(true); 
 
     mySVG.appendChild(dashPath); 
 
     var pathLen=path.getTotalLength(); 
 
     var aktPos=0 
 
     var sumSteps = duration/(1000/60) // 60 pics per second 
 
     var step=0; 
 
     var pathAnim; 
 
     dashPath.setAttribute('stroke-dasharray', length + ' ' + (pathLen - length)); 
 
     dashPath.setAttribute('stroke', "red"); 
 
     dashPath.setAttribute('stroke-dashoffset', aktPos); 
 

 
     var anim=function(){ 
 
     aktPos = pathLen/sumSteps*step*-1; 
 
      //aktLen = easeInOutQuad(step/sumSteps)*len; 
 
     dashPath.setAttribute('stroke-dasharray', length + ' ' + pathLen); 
 
     dashPath.setAttribute('stroke-dashoffset', aktPos); 
 

 
     if (step <= (sumSteps)){ 
 
      step++; 
 
      pathAnim = setTimeout(anim, 1000/60) //1000/60 pics/second 
 
      } else { 
 
      mySVG.removeChild(dashPath); 
 
      clearTimeout(pathAnim); 
 
      } 
 
     } 
 
    anim(); 
 
    } 
 
    dashAni(myPath, 50, 1500); 
 
    </script> 
 
</body> 
 
</html>

出典

2017-05-30 06:06:15

あなたの答えが正しい方向に私を案内...多分私は電車の中で私のラップトップ上でそれを書き、Chromeでテストしました。私はまだsvgに沿って白いアニメーションの行を達成することができません：https://jsfiddle.net/yrj7htoy/2/。このコードに助言していただけますか？ – user3615851

私は問題はあなたが非継続的な道を持っていることだと思います。複数の 'm'を使用するとパスが壊れます。 –

私のパスは閉じています： [fiddle]（https://jsfiddle.net/pa9ubf2a/） –

SVG線上の要素がアニメーション化可能です

答えて

関連する問題