奇形SVG动画

Question

到目前为止，我在codepen https://codepen.io/phfilly/pen/gxbmmo?editors=1100上有这个信息

    <div class="container">
     <svg viewBox="-5 0 62.772 74.316" class="logo">
     <path d="M43.034,33.66" class="logo-line"></path>
     <path d="M9.607,33.012" class="logo-line-1"></path>
     <path  class="logo-line-two" d="M26.256,54.721c-9.245,0-16.766-7.59-16.766-16.92c0-4.496,1.729-8.73,4.867-11.921L33.171,6.882l5.514,5.561
        l-6.921,6.99l6.344,6.4c0,0,0,0.001,0.001,0.001l0.002,0.002c3.168,3.196,4.911,7.445,4.911,11.964
        C43.021,47.129,35.501,54.721,26.256,54.721z M26.253,24.995l-6.373,6.436c-1.67,1.698-2.595,3.965-2.595,6.37
        c0,4.992,4.024,9.054,8.97,9.054c4.946-0.001,8.972-4.062,8.972-9.054c0-2.419-0.934-4.692-2.631-6.404L26.253,24.995z"></path>
      <path  class="logo-line-three" d="M26.387,64.316c-7.049,0-13.675-2.77-18.659-7.799C2.744,51.488-0.001,44.801,0,37.688
        c0-7.076,2.722-13.739,7.663-18.763L26.394,0l5.515,5.56L13.186,24.476c-3.474,3.532-5.391,8.227-5.391,13.212
        c0,5.012,1.933,9.725,5.444,13.268c3.511,3.543,8.181,5.494,13.147,5.494c10.252,0,18.591-8.416,18.591-18.762
        c0-5.015-1.936-9.729-5.45-13.272h0.001l-9.11-9.192l5.512-5.564l9.114,9.199c4.984,5.028,7.729,11.715,7.729,18.83
        C52.772,52.37,40.936,64.316,26.387,64.316z"></path>
        </svg></div>

.logo path {
/*     fill: #ff5825; */
/*     transition: fill 0.5s; */
}

.container {
  width: 100px;
  display: block;
  margin: auto;
  padding: 50px 15px;
}

.logo-line-two, .logo-line-three {
  fill: transparent;
  stroke: #ff5825;
  stroke-width: 1px;
  stroke-dasharray: 320 320;
  stroke-dashoffset: -300;
  animation: dash 6s linear .5s infinite alternate;
} 

@keyframes dash {
  0% {
    stroke-dashoffset: -300;
  }
  30% {
    stroke-dashoffset: 0;
  }
  60% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -300;
  }

}

从我的发现和研究来看，这似乎只能通过使用剪辑路径来实现，或者有更简单的方法吗？如果是这样的话，我不确定使用什么属性作为clipPath。

任何帮助或指导将非常感谢。

Answer 1

动画填充可能是杂乱和复杂的。由于您的徽标由具有恒定宽度的线段组成，因此将其绘制为带有与这些线段宽度匹配的笔划的动画路径更有意义。

这是你所追求的一个模糊的近似；你得自己整理几何形状。

#logo {
  stroke-dasharray: 1100;
  stroke-dashoffset: 1100;
  animation: draw 2s forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

<svg width="125" height="150" viewBox="0 0 250 300">
  <g transform="translate(125,170)">
  <path id="logo" stroke="#000" stroke-width="30"
        fill="none" stroke-linecap="butt"
        d="M10.6-152.0-70.7-70.7A100 100 0 1 0 70.7-70.7L28.7
           -112.7-42-42A59.4 59.4 0 1 0 42-42L10.6-73.4"
  />
</svg>