SVG handwriting animation without using stroke pro

问题:

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.

回答1:

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!

回答2:

The svg engine doesn't know that the path fill in your example is handwriting, and there's no defined direction for the handwriting motion.

Calligraphy makes it a little harder to accomplish since there's no built-in support for variable stroke widths in svg. However, it might be passable to do a clip-path animation, using the animation code you quoted, but on a "crude copy" of the original path which has been converted to just a thick stroke, without fill. That clip-path can then be applied to the original path in your example to give an impression of the calligraphic stroke being drawn.

Another option is to not use a path, but to draw the whole thing with lots of small rectangles along the path. This implies using javascript instead of css animation.