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

}

但我对SVG动画方面缺乏一点了解。我想为填充颜色设置动画（我注释掉它以显示我正在追踪的动画），而不一定是笔触。

从我的研究结果和研究看来，这似乎只能通过使用clipPath来实现，还是有更简单的方法呢？如果是这样的话，我不确定将哪些属性用作clipPath。

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

Answer 1

徽标的三个（？）部分都具有一致的宽度，因此只需使用三条粗线而不是三条轮廓重新绘制徽标。

Answer 2

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

这是你所追求的模糊近似;你必须自己整理几何图形。

#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>

注意：如果您不确定<path>元素中发生了什么，您应该阅读SVG的elliptical arc命令。

奇形SVG动画

2 个答案: