将SVG Animation与ScrollMagic一起使用时会出现奇怪的点

Question

我正在尝试使用ScrollMagic制作类似签名的SVG动画。我跟着他们的example，但签名中出现了奇怪的点。问题：如何删除点？

这是我使用的代码：

JavaScript的：

var controller = new ScrollMagic.Controller();

// About Scene
var $charR = $("path#char_r");
var $charA = $("path#char_a");
var $charP = $("path#char_p");
var $charT = $("path#char_t");
var $charO = $("path#char_o");
var $charR2 = $("path#char_r2");

pathPrepare($charR);
pathPrepare($charA);
pathPrepare($charP);
pathPrepare($charT);
pathPrepare($charO);
pathPrepare($charR2);

var tween = new TimelineMax()
  .add(TweenMax.to($charR, 0.2, {
    strokeDashoffset: 0,
    ease: Linear.easeNone
  }))
  .add(TweenMax.to($charA, 0.2, {
    strokeDashoffset: 0,
    ease: Linear.easeNone
  }))
  .add(TweenMax.to($charP, 0.2, {
    strokeDashoffset: 0,
    ease: Linear.easeNone
  }))
  .add(TweenMax.to($charT, 0.2, {
    strokeDashoffset: 0,
    ease: Linear.easeNone
  }))
  .add(TweenMax.to($charO, 0.2, {
    strokeDashoffset: 0,
    ease: Linear.easeNone
  }))
  .add(TweenMax.to($charR2, 0.2, {
    strokeDashoffset: 0,
    ease: Linear.easeNone
  }))
  .add(TweenMax.to("path", 1, {
    stroke: "#33629C",
    ease: Linear.easeNone
  }), 0);

var scene_about = new ScrollMagic.Scene({
    triggerElement: "#trigger1"
  })
  .setTween(tween)
  .addIndicators({
    name: "About Content"
  })
  .addTo(controller);

function pathPrepare($el) {
  var lineLength = $el[0].getTotalLength();
  $el.css("stroke-dasharray", lineLength);
  $el.css("stroke-dashoffset", lineLength);
}

HTML：

<div id="content-wrapper">
  <div class="scrollContent">
    <section class="demo">
      <div class="spacer s7"></div>
      <div id="trigger1" class="spacer s0"></div>
      <div class="spacer s10"></div>
      <div id="trigger_menu" class="spacer s0"></div>
      <div class="spacer s10"></div>
    </section>
  </div>
  <section class="about">
    <h2>Hello</h2>
    <div class="about_content">
      <svg xmlns="http://www.w3.org/2000/svg">
        <path id="char_r" style="stroke-linecap: round; stroke-linejoin: round;" fill="none" stroke="#000000" stroke-width="5" d="M55.79,45.22a17,17,0,0,1-1.08,5.94,17.82,17.82,0,0,1-3,5.22,15,15,0,0,1-4.54,3.71,12.1,12.1,0,0,1-5.8,1.4,9.85,9.85,0,0,1-7.24-2.66,9.65,9.65,0,0,1-2.7-7.2,16.3,16.3,0,0,1,1.58-7,24.73,24.73,0,0,1,4.32-6.34,34.56,34.56,0,0,1,6.41-5.36,46.92,46.92,0,0,1,7.85-4.14,48.45,48.45,0,0,1,8.68-2.66,43.31,43.31,0,0,1,8.82-.94,42,42,0,0,1,6.37.5,18.44,18.44,0,0,1,5.65,1.73l1.66-.65q.93-.36,2-.68t2.05-.58a11.9,11.9,0,0,1,1.87-.32l.07.43a14.58,14.58,0,0,0-3.42.86,25.13,25.13,0,0,0-3.13,1.44q5.47,3.1,5.47,8.93a13.41,13.41,0,0,1-1.48,6.52,12.74,12.74,0,0,1-3.89,4.39,16.17,16.17,0,0,1-5.51,2.45,26.62,26.62,0,0,1-6.34.76v.14a7.64,7.64,0,0,1,3.35,2.48,6.68,6.68,0,0,1,1.12,4,14.11,14.11,0,0,1-.68,3.89q-.69,2.31-1.55,4.75t-1.58,4.57a12.17,12.17,0,0,0-.72,3.64q0,2.3,2.09,2.3a11.17,11.17,0,0,0,5-1.48,26.08,26.08,0,0,0,6-4.57A71.41,71.41,0,0,0,94,57.53l.65.29q-1.66,2.59-3.92,5.8a54,54,0,0,1-5.51,6.52Q78,77.62,72,77.62a6.06,6.06,0,0,1-4-1.22,4.49,4.49,0,0,1-1.48-3.67,11.31,11.31,0,0,1,.83-3.82q.83-2.23,1.84-4.61T71,59.55a13.46,13.46,0,0,0,.79-4.18q0-2.73-1.48-3.6a10.87,10.87,0,0,0-3.85-1.22l.29-.72q.79.15,1.51.22a15.09,15.09,0,0,0,1.51.07,13.66,13.66,0,0,0,5.76-1.19,13.31,13.31,0,0,0,4.43-3.24,14.76,14.76,0,0,0,2.84-4.79,16.74,16.74,0,0,0,1-5.83,9,9,0,0,0-.68-3.46,6.17,6.17,0,0,0-2.05-2.66,24.84,24.84,0,0,0-7,6.59Q70.7,40,67.35,45.4L60.51,56.52a92,92,0,0,1-7.38,10.4,39.89,39.89,0,0,1-8.28,7.7,16.69,16.69,0,0,1-9.58,3,10.39,10.39,0,0,1-2.38-.29,7.16,7.16,0,0,1-2.2-.9,5.36,5.36,0,0,1-1.62-1.58,4,4,0,0,1-.65-2.27,2.82,2.82,0,0,1,.79-2.09,2.92,2.92,0,0,1,2.16-.79,2.13,2.13,0,0,1,1.62.65,2.23,2.23,0,0,1,.61,1.58,3,3,0,0,1-.5,1.66,1.53,1.53,0,0,1-1.51.72A2.86,2.86,0,0,0,33.11,76a5.75,5.75,0,0,0,3,.76,10.4,10.4,0,0,0,7-2.92,42.56,42.56,0,0,0,6.48-7.52q3.2-4.61,6.41-10.22t6.84-11a81.19,81.19,0,0,1,7.85-9.94,31,31,0,0,1,9.32-7,16.9,16.9,0,0,0-5.33-1.66,39.76,39.76,0,0,0-5.76-.43,39.12,39.12,0,0,0-7.6.79,45.89,45.89,0,0,0-7.85,2.3,43.56,43.56,0,0,0-7.38,3.74,30.19,30.19,0,0,0-6.19,5.15,24.4,24.4,0,0,0-4.25,6.41A18.17,18.17,0,0,0,34,52.06,9.4,9.4,0,0,0,36,58.32a6.76,6.76,0,0,0,5.47,2.3A10.92,10.92,0,0,0,47,59.19a14.89,14.89,0,0,0,4.25-3.67,16.63,16.63,0,0,0,2.7-5,16.44,16.44,0,0,0,.94-5.33Z"/>
        <path id="char_a" style="stroke-linecap: round; stroke-linejoin: round;" fill="none" stroke="#000000" stroke-width="5" d="M113.39,51.7h4.68Q115.41,55.44,113,59t-4.36,6.52q-1.91,3-3.06,5.26a8.65,8.65,0,0,0-1.15,3.56q0,1.87,1.94,1.87a7.81,7.81,0,0,0,3.85-1.48,33.84,33.84,0,0,0,5.08-4.07,70.75,70.75,0,0,0,5.62-6,85.78,85.78,0,0,0,5.47-7.34l.43.14q-1.94,3-4.57,6.37a71.64,71.64,0,0,1-5.51,6.37,38.9,38.9,0,0,1-5.76,4.93,9.67,9.67,0,0,1-5.4,2,4,4,0,0,1-3.06-1,3.52,3.52,0,0,1-1-2.48,6.21,6.21,0,0,1,.32-2q.32-1,.68-2l-.14-.07q-.94,1-2.34,2.34a27.63,27.63,0,0,1-3,2.48,20.54,20.54,0,0,1-3.35,1.94,8,8,0,0,1-3.31.79,4.13,4.13,0,0,1-3.74-1.66,6.7,6.7,0,0,1-1.08-3.74,14.2,14.2,0,0,1,1.87-6.52,31.54,31.54,0,0,1,4.75-6.7,29.67,29.67,0,0,1,6.26-5.22,12.29,12.29,0,0,1,6.41-2.09,7.33,7.33,0,0,1,2.52.4,5.16,5.16,0,0,1,1.8,1.08,5,5,0,0,1,1.12,1.55,9.43,9.43,0,0,1,.61,1.8H111ZM89.85,71.86a4.15,4.15,0,0,0,.68,2.56,2.26,2.26,0,0,0,1.91.9,6.24,6.24,0,0,0,2.88-.9A21.24,21.24,0,0,0,98.78,72a34.75,34.75,0,0,0,3.56-3.49,29.45,29.45,0,0,0,3.13-4.21,26.43,26.43,0,0,0,2.23-4.54,12.5,12.5,0,0,0,.86-4.39A3.1,3.1,0,0,0,105.33,52a8.66,8.66,0,0,0-4.82,1.87,25.4,25.4,0,0,0-5,4.79,30,30,0,0,0-4,6.44A16.21,16.21,0,0,0,89.85,71.86Z"/>
        <path id="char_p" style="stroke-linecap: round; stroke-linejoin: round;" fill="none" stroke="#000000" stroke-width="5" d="M143.27,37.73q-3.82,5.83-7.92,11.45T127.5,60.7l.14.14q1.08-1.44,2.52-3.13a32.2,32.2,0,0,1,3.1-3.17,16.45,16.45,0,0,1,3.6-2.45,8.76,8.76,0,0,1,4-1,6.17,6.17,0,0,1,3.89,1.22q1.58,1.23,1.58,4.25a12.43,12.43,0,0,1-.5,3.56,15.49,15.49,0,0,1-1.33,3.17,18.33,18.33,0,0,1-1.87,2.74q-1,1.26-2.12,2.34l.14.14A26.84,26.84,0,0,0,150,65a34,34,0,0,0,8.39-7.78l.58.29a41.41,41.41,0,0,1-6,6.19,27,27,0,0,1-5.18,3.35,20.65,20.65,0,0,1-4.39,1.55q-2,.43-3.82.86-1.23.94-2.77,2.23t-3.28,2.48a22.16,22.16,0,0,1-3.6,2,9.37,9.37,0,0,1-3.82.83,4,4,0,0,1-2-.54,1.86,1.86,0,0,1-1-1.76,3,3,0,0,1,1.48-2.52,12.49,12.49,0,0,1,3.6-1.62,32.33,32.33,0,0,1,4.43-.94q2.3-.32,3.89-.47a21.42,21.42,0,0,0,1.91-2.63,28.45,28.45,0,0,0,1.76-3.28,23.53,23.53,0,0,0,1.3-3.56,13,13,0,0,0,.5-3.42q0-2.52-.72-3.28a2.3,2.3,0,0,0-1.73-.76A6.47,6.47,0,0,0,136,53.46a22.06,22.06,0,0,0-3.71,3.1,51.22,51.22,0,0,0-3.71,4.25q-1.84,2.34-3.42,4.64t-2.88,4.28q-1.3,2-2.16,3.13l-1.87,2.74q-1.22,1.8-2.74,4.1t-3.2,5Q110.66,87.34,109,90t-3.17,5.22q-1.51,2.52-2.66,4.54H98.7q9.72-15.62,19.84-31t20-31.07Zm-16.2,38.45a5.16,5.16,0,0,0,2.41-.72,17.32,17.32,0,0,0,2.59-1.73,27.56,27.56,0,0,0,2.27-2q1-1,1.44-1.51l-.14-.14q-1.23.22-3.06.47a31.57,31.57,0,0,0-3.53.68,9.9,9.9,0,0,0-2.88,1.19A2.33,2.33,0,0,0,125,74.45a1.45,1.45,0,0,0,.65,1.29A2.53,2.53,0,0,0,127.07,76.18Z"/>
        <path id="char_t" style="stroke-linecap: round; stroke-linejoin: round;" fill="none" stroke="#000000" stroke-width="5" d="M170.77,43.35l-5.69,8.35h9.5l-.43.86h-9.65q-2.88,4.68-5.15,8.1t-3.82,5.9a41.45,41.45,0,0,0-2.34,4.18,7.21,7.21,0,0,0-.79,3,2,2,0,0,0,.94,1.91,4.24,4.24,0,0,0,2.16.54,10.94,10.94,0,0,0,5.72-2,42.68,42.68,0,0,0,6.23-4.86,78.94,78.94,0,0,0,5.9-6.12q2.81-3.24,4.75-5.83l.43.29q-2.45,3.1-5.36,6.52a71.62,71.62,0,0,1-6,6.26,38.3,38.3,0,0,1-6.23,4.72A11.64,11.64,0,0,1,155,77a5.78,5.78,0,0,1-3.85-1.37,4.72,4.72,0,0,1-1.62-3.82,9.07,9.07,0,0,1,.94-3.71,36.81,36.81,0,0,1,2.45-4.43q1.51-2.38,3.42-5.18t3.92-6h-3.89l.43-.86h4l5.62-8.35Z"/>
        <path id="char_o" style="stroke-linecap: round; stroke-linejoin: round;" fill="none" stroke="#000000" stroke-width="5" d="M210.45,58.25a14,14,0,0,1-3.89,3.1,9,9,0,0,1-4.25,1.15,6.39,6.39,0,0,1-3.46-.9,7,7,0,0,1-2.23-2.12h-.14a21.35,21.35,0,0,1-2.66,5.83A29.86,29.86,0,0,1,189.17,71a26.63,26.63,0,0,1-5.94,4.32A13.92,13.92,0,0,1,176.61,77a5.9,5.9,0,0,1-4.68-1.8,7,7,0,0,1-1.58-4.82,10.57,10.57,0,0,1,.79-3.67,21.51,21.51,0,0,1,2.2-4.21,32.25,32.25,0,0,1,3.31-4.18,28.34,28.34,0,0,1,4.14-3.67,21,21,0,0,1,4.71-2.59,13.64,13.64,0,0,1,5-1,6,6,0,0,1,4.57,1.73,6.82,6.82,0,0,1,1.76,4.46,4.89,4.89,0,0,0,1.55,3.06,5.2,5.2,0,0,0,3.85,1.4,8.13,8.13,0,0,0,4.07-1.08,15.61,15.61,0,0,0,3.56-2.81Zm-36.22,13.9a5.26,5.26,0,0,0,.72,3,2.42,2.42,0,0,0,2.16,1.08,8,8,0,0,0,3.85-1,17.35,17.35,0,0,0,3.67-2.74,25.84,25.84,0,0,0,3.28-3.85,32.53,32.53,0,0,0,2.63-4.46,29.56,29.56,0,0,0,1.76-4.5,14.25,14.25,0,0,0,.65-4,4.24,4.24,0,0,0-.76-2.56,2.7,2.7,0,0,0-2.34-1,6.66,6.66,0,0,0-3.24,1,19.85,19.85,0,0,0-3.49,2.56,26.06,26.06,0,0,0-3.35,3.67,38.28,38.28,0,0,0-2.84,4.32A24.08,24.08,0,0,0,175,68,13.62,13.62,0,0,0,174.23,72.15Z"/>
        <path id="char_r2" style="stroke-linecap: round; stroke-linejoin: round;" fill="none" stroke="#000000" stroke-width="5" d="M217.43,51.7,208.29,65l.14.14q1-1.22,2.56-2.84T214.37,59q1.84-1.69,3.85-3.35t4-3a4.41,4.41,0,0,1,.79-1.15,2.5,2.5,0,0,1,1.73-.43q.79,0,1.4,0t1.26.11a18.52,18.52,0,0,0-2.37,3,6.89,6.89,0,0,0-1.15,3.85,3.77,3.77,0,0,0,.83,2.59,2.63,2.63,0,0,0,2.05.94,5.53,5.53,0,0,0,2.12-.43,10.65,10.65,0,0,0,2-1.08q.93-.65,1.8-1.37t1.51-1.3l.43.29q-.72.72-1.66,1.55a18.71,18.71,0,0,1-2,1.55,11.67,11.67,0,0,1-2.3,1.19,7,7,0,0,1-2.52.47,5,5,0,0,1-3.71-1.4,5.31,5.31,0,0,1-1.4-3.92,6.05,6.05,0,0,1,.79-3.1l-.14-.14a56.92,56.92,0,0,0-6.48,5.29Q211.6,62.5,207.64,67a26.26,26.26,0,0,0-3,4.18,42.5,42.5,0,0,0-2.7,5.33h-4.68q3.89-6.19,7.78-12.31t8-12.46Z"/>
      </svg>
    </div>
    <div><i class="fas fa-arrow-circle-down fa-3x"></i></div>
  </section>
</div>

CSS：

::-webkit-scrollbar {
  display: none;
}

html,
body {
  height: 100%;
  scrollbar-width: none;
  /* Firefox */
  background-color: #86D8FF;
}

body {
  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
  font-size: 12px;
  color: #FFF;
  overscroll-behavior: none;
  /* prevent inner bouncing */
}

#content-wrapper {
  width: 100%;
  height: 100%;
}

.scrollContent {
  overflow-y: scroll;
  width: 100%;
  height: auto;
  overscroll-behavior: auto;
}

.spacer {
  text-align: center;
  min-height: 100px;
}

.spacer.s0 {
  min-height: 1px;
}

.spacer.s1 {
  min-height: 100px;
}

.spacer.s2 {
  min-height: 200px;
}

.spacer.s3 {
  min-height: 300px;
}

.spacer.s4 {
  min-height: 400px;
}

.spacer.s5 {
  min-height: 500px;
}

.spacer.s6 {
  min-height: 600px;
}

.spacer.s7 {
  min-height: 700px;
}

.spacer.s8 {
  min-height: 800px;
}

.spacer.s9 {
  min-height: 900px;
}

.spacer.s10 {
  min-height: 1000px;
}

.spacer.s_viewport {
  min-height: 100%;
}

.demo {
  text-align: center;
}

.about {
  position: fixed;
  top: 200px;
  width: 100%;
  height: auto;
  margin: auto;
  text-align: center;
}

.about h2 {
  font-size: 30px;
}

.about .about_content {
  font-size: 14px;
  text-align: center;
}

.about .about_content svg {
  width: 263px;
  height: 125px;
}

JSぇdでも但是：z zxswい

Answer 1

当您启动路径动画时，您将添加https://jsfiddle.net/shivanraptor/3aurm7of/1/和stroke-dasharray。然后破折号来回动画。

但最后你会留下一个零长度的短划线。不幸的是，你的线路有stroke-dashoffset。具有圆端的零长度线导致点。

有几种方法可以解决这个问题：

1. 在开始之前和完成之后隐藏笔划（例如，stroke-linecap: round;），或
2. 不要使用圆形端盖。请改用对接帽。 stroke="none"，或
3. 使虚线数组值略大于路径长度，并使用短划线偏移量，该偏移量开始于短划线的间隙部分。 https://jsfiddle.net/68eb24tr/1/

   function pathPrepare($el) {
     var lineLength = $el[0].getTotalLength();
     $el.css("stroke-dasharray", lineLength + 2);
     $el.css("stroke-dashoffset", lineLength + 3);
   }