如何绘制填充 svg？

Question

我想为我的徽标制作动画，例如绘制它以显示它，它看起来像这样：

是否可以只用填充来绘制？我看过的每个教程都只显示了用笔画绘制的可能性。但我实际上想要我的填充具有相同的绘图效果：

.st1{fill:black;}

这是我的完整 svg 代码：

https://jsfiddle.net/b4dn44kL/

Answer 1

简短的回答是否定的。没有简单的方法可以使任意填充形状具有 "drawn line" 效果。您可以使用线性填充蒙版从上到下或从下到上 "fill"。但这显然会遵循循环等周围线的形状。

您几乎无法使用传统的动画技术：绘制一系列帧并一个接一个地显示它们。

Answer 2

有了这样一个漂亮而简单的标志，你可以很容易地用笔画来伪造它：

向您的 SVG 添加几 "fake" 行，stroke-width 宽度足以覆盖徽标。
在这些行上使用原始徽标路径 (.st1) 作为 clipPath 以隐藏徽标之外的部分。
动画 "fake" 行。 (How SVG Line Animation Works)

已更新 fiddle：https://jsfiddle.net/b4dn44kL/1/

Answer 3

这是我找到的梯度解：

<defs>
    <lineargradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0">
   <animate attributeName="stop-opacity" values="0; 1" begin="middle1.end" dur="1s" fill="freeze" />
   </stop>
   <stop offset="40%" style="stop-color:rgb(255,255,255);stop-opacity:0">
    <animate attributeName="stop-opacity" values="0; 1" begin="2000ms" dur="1s" id="middle1" fill="freeze" /></stop>
    <stop offset="70%" style="stop-color:rgb(255,255,255);stop-opacity:0">
    <animate attributeName="stop-opacity" values="0; 1" begin="800ms" dur="2s" id="middle" fill="freeze" /></stop>
      <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:0">
   <animate attributeName="stop-opacity" values="0; 1" dur="1s" id="down" fill="freeze" /></stop>
    </lineargradient>
  </defs>

https://jsfiddle.net/9mhxpbph/

如何绘制填充 svg？

How to draw a fill svg?

css

animation

svg

fill