css – 笔画动画的开始和结束

我想要的是绿色和我已经拥有的是图像中的红色.我希望它能在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>

解决方法

您面临的问题是渲染末端的方式.我不知道如何以你需要的角度结束它. 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

原文地址：https://www.jb51.cc/css/215010.html