不使用笔触属性的SVG手写动画 [英] SVG handwriting animation without using stroke properties

问题描述

我正在尝试制作SVG手写动画。我已经研究了一些教程，但是所有教程都使用了SVG笔触属性，但对我来说效果不佳，因为在我的情况下，动画应放在 fill 上，而不是行程。

我发现了这样的情况：

  svg路径{
 fill：none; 
中风：＃000； 
笔划宽度：1； 
笔画线上限：圆形； 
 stroke-linejoin：圆形； 
 stroke-dasharray：1700; 
 stroke-dashoffset：1700; 
 -webkit-animation：破折号5s线性向前； 
动画：破折号5s线性向前； 
} 
 
 @ -webkit-keyframes破折号{
 to {
 stroke-dashoffset：0; 
} 
} 
 
 @keyframes破折号{
 to {
 stroke-dashoffset：0; 
} 
} 
  

这是我正在处理的SVG：

  .pentip {stroke-linecap：round; stroke-linejoin：round;填充：无；中风：＃e21b1b;笔划宽度：15； stroke-dasharray：1454；笔划破折号：1454;动画：破折号5s线性向前；} @关键帧破折号{到{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>猴子< / 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>  

显然，在创建笔划时会更加小心！

I'm trying to work on a SVG handwriting animation. I've already researched some tutorials but all them are using SVG stroke properties and it's not quite working for me, because in my situation the animation should be on the fill, not the stroke.

I've found things like that:

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

Here's the SVG I'm working on: http://codepen.io/boyporreta/pen/BNewgG

Is there a way to create this animation using fill instead of stroke?

Thanks in advance.

解决方案

I thought I'd have a go at Erik's suggested method. Combining the stroke animating technique from here with his suggestion to clip I came up with 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!

这篇关于不使用笔触属性的SVG手写动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！