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

Question

我正在尝试处理SVG手写动画。我已经研究了一些教程但是它们都使用了SVG笔触属性而且它对我来说并不适合，因为在我的情况下，动画应该在fill上，而不是{{1 }}

我发现了类似的事情：

stroke

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

有没有办法使用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; } } 代替fill创建此动画？

提前致谢。

Answer 1

我以为我会选择Erik建议的方法。结合使用笔画动画技术from here和他的剪辑建议，我提出了this

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

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

书法使得它变得有点难以实现，因为svg中没有对可变笔画宽度的内置支持。但是，使用您引用的动画代码执行clip-path动画可能是可行的，但是在原始副本上＃34;已经转换为粗笔划的原始路径，没有填充。然后可以将clip-path应用于示例中的原始路径，以给出绘制书法笔划的印象。

另一种选择是不使用路径，而是沿着路径绘制包含许多小矩形的整个东西。这意味着使用javascript代替css动画。