Question

如果我有一个使用bezier的SVG <path>（假设是二次方），我已经指定了终点A，终点B和控制点C.

如果我还有一些位于bezier路径上的任意点P，我怎么能画出如上定义的bezier，但是停在P处（而不是从A到B一直走，从A到P）？

Answer 1

以下示例为您提供了一点方向

＆＃13;

  <!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;width:100px;height:100px;}
    </style>
  </head>
    <body>
      <p>Offset Dasharray</p>
     <svg width="200" height="200" viewBox="0 0 500 500">
     <path id="myPath" d="M 50 50 q 200 800 400 0" stroke="none"
      stroke-width="5" fill="none" />
    </svg>
    <script>
      var paintPathAni=function(path, duration, color, callback){
          easeInOutQuad= function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t }
          easeInQuad= function (t) { return t*t}
          easeOutQuad= function (t) { return t*(2-t) }
          /*
          for (var i=0; i<=1; i+=0.1)
          { 
            console.log(easeInOutQuad(i));
          }
          */
          var len=path.getTotalLength();  
          var aktLen;
          var sumSteps = duration / (1000/60) // 60 pics per second
          var step=1;
          var pathAnim;
          var anim=function(){
            //aktLen = len/sumSteps*step;
            aktLen = easeInOutQuad(step/sumSteps)*len; 
            //aktLen = easeInQuad(step/sumSteps)*len; 
            //aktLen = easeOutQuad(step/sumSteps)*len; 
            
            path.setAttribute('stroke-dasharray', aktLen + ' ' + (len - aktLen));
            path.setAttribute('stroke',color);
            if (step < sumSteps){
              step++;
              pathAnim = setTimeout(anim, 1000/60) //1000/60 pics/second
              } else {
                clearTimeout(pathAnim);
                path.setAttribute('stroke',"red");
                path.setAttribute('stroke-dasharray','none');
                if (callback) return callback();
              }
          }
          anim();   
      }
      paintPathAni(myPath, 3500,'red',function(){console.log('Animation End')});
    </script>
  </body>  
  </html>

＆＃13;

SVG bezier路径，仅从端点到某个交叉点

1 个答案: