笔画动画的开始和结束

Question

我想要的是绿色而我已经拥有的是图像中的红色。我希望它能在 CSS 动画中完成。三角形的边缘（笔划的开始和结束）应该像图片一样成角度。

我到目前为止的代码是：

.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

您面临的问题是渲染结尾的方式。我不知道如何让它以你需要的角度结束。没有stoke-linecap值适合 您还应注意SVG中的path元素没有相同的起点和终点。

解决方法：

一种方法是让路径比你需要的更远，并用clipPath隐藏溢出。这样，sroke将以所需的角度结束：

.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

Answer 2

如果您将45中的60值更改为path（度数），它会为您提供所需的输出AFAICT

段

＆＃13;

＆＃13;

.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%;
}

＆＃13;

<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 60 L79 200 L213 200 L152.324 50 L156 60" fill="url(#fagl)" />
    </g>
  </svg>
</div>

＆＃13;

＆＃13;

＆＃13;