css - 笔划动画的开始和结束

Question

我想要的是绿色的而我已经拥有的是图像中的红色。我希望它在 CSS 动画中完成。三 Angular 形的边缘(笔画的起点和终点)应该像图中那样倾斜。

我目前的代码是:

.path {
  stroke-dasharray: 504;
  animation: dash 2.5s linear infinite;
  -webkit-animation: dash 2.5s linear infinite;
  -moz-animation: dash 2.5s linear infinite;
  -ms-animation: dash 2.5s linear infinite -o-animation: dash 2.5s linear infinite;
}
@keyframes dash {
  0% {
    stroke-dashoffset: 0;
    stroke-width: 30;
  }
  50% {
    stroke-dashoffset: 500;
    stroke-width: 30;
  }
  100% {
    stroke-dashoffset: 1000;
    stroke-width: 30;
  }
}
div svg {
  width: 20%;
}

<div>
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 252.7 251.9" style="enable-background:new 0 0 252.7 251.9;" xml:space="preserve">
    <style type="text/css">
      .st0 {
        fill: #fff;
      }
    </style>
    <g>
      <path stroke="#C5C5C5" stroke-width="20" stroke-linejoin="square" stroke-linecap="butt" class="path" d="M151 45 L79 200 L213 200 L152.324 50 L156 45" fill="url(#fagl)" />
    </g>
  </svg>
</div>

Answer 1

您面临的问题是描边末端的渲染方式。我不知道有什么方法可以使它以您需要的 Angular 精确结束。没有stoke-linecap值会合适。
您还应该注意，您的 SVG 中的路径元素没有相同的起点和终点。

解决方法:

一种方法是让路径比你需要的走得更远，并用 clipPath overflow hidden .这样，stroke 将以所需的 Angular 结束:

.path {
  stroke-dasharray: 23;
  animation: dash 2.5s linear infinite;
}
@keyframes dash {
  to { stroke-dashoffset: -46; }
}
svg { width: 20%; }

<svg viewBox="0 0 10 10">
  <clipPath id="clip">
    <path d="M5 1 L8 9 H2z" />
  </clipPath>
  <path stroke="#C5C5C5" stroke-width="2" class="path" d="M5 1 L8 9 H2 L5 1" fill="url(#fagl)" clip-path="url(#clip)" />
</svg>

请注意，我还简化了您的 SVG 和 CSS