不使用笔画属性的 SVG 手写动画

Question

我正在尝试制作 SVG 手写动画。我已经研究了一些教程，但它们都使用 SVG 笔画属性，这对我来说不太适用，因为在我的情况下，动画应该在 fill，而不是 stroke。

我发现了类似的东西：

svg path {
  fill: none;
  stroke: #000;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1700;
  stroke-dashoffset: 1700;
  -webkit-animation: dash 5s linear forwards;
  animation: dash 5s linear forwards;
}

@-webkit-keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

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

这是我正在处理的 SVG：http://codepen.io/boyporreta/pen/BNewgG

有没有办法使用fill 而不是stroke 创建这个动画？

提前致谢。

Answer 1

我想我应该尝试一下 Erik 建议的方法。将笔画动画技术from here 与他对剪辑的建议相结合，我想出了this

.pentip {
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
  stroke:#e21b1b;
  stroke-width:15;
  stroke-dasharray: 1454;
  stroke-dashoffset: 1454;
  animation: dash 5s linear forwards;
}

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

<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 341.61432 138.25008">
  <defs>
        <clipPath id="svgTextPath">
            <text x="10" y="94" 
                  font-family='Pacifico' 
                  font-size="95">Monkey</text>
        </clipPath>
    </defs>
  
 <g clip-path="url(#svgTextPath)"> 
  <path class="pentip"  d="M7.6 39.8l17.5-22 5.6 5.7-3.4 52-3 17.2L46.5 30s9.2-13.3 15-11c10.2 4.2-1.3 74-1.3 74S82 16 93.6 19.6c20.2 6-6 64 6.3 67.4 12.2 3.4 21-15 21-15l6.4-16.2 15.2-1s-19.4 5.7-19.4 6.7l-1 21.5 10.7 6.3L144 73l-8-20.4L164.5 69l2-17.7L163 90l22-36.3-.2 33.5 20.2-8.4 3-42.7 14.3-28.5 8.5 4.5s-13 46.4-14.2 47.2c-1 .7-12 28-12 28l15.2-19.6s13.6-18 17.8-12.6c4.2 5.2-11.8 28.3-11.8 28.3s-1 5.8 8 5.5c8.8-.3 19.3-14.4 25.3-16.3 6-1.8 17.6-11.2 11.5-16.7-6-5.6-21.2-1-21 8 .3 9.3 0 24.7 11.3 24.7s21.3-3 23.6-10.7c2.4-8 9.5-28.3 7-25.7-2.3 2.7-11.7 15-8.8 24.7 3 9.7 9 16.6 16 10.3 7-6.3 17.3-35.4 14.7-33.6-2.6 1.8-12 61.6-12 61.6l-12.8 15.8-12-2.7s2-4 7.2-12.2c5.3-8 32-24 36-27.3 4-3 14.6-17.3 14.6-17.3"/>
   </g>
</svg>

You'd obviously be a bit more careful with your stroke creation!

Answer 2

svg 引擎不知道您示例中的路径填充是手写，并且没有定义手写动作的方向。

书法使其更难完成，因为 svg 中没有对可变笔画宽度的内置支持。但是，使用您引用的动画代码制作clip-path 动画可能是可以接受的，但是在原始路径的“原始副本”上已被转换为粗笔画，没有填充。然后可以将 clip-path 应用于示例中的原始路径，以给人一种正在绘制的书法笔画的印象。

另一种选择是不使用路径，而是沿着路径用许多小矩形绘制整个事物。这意味着使用 javascript 而不是 css 动画。