9

I have an SVG path like this:

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" version="1.1"  baseProfile="full"> 
    <path d="M47.16,66.38c0.62,1.65-0.03,2.93-0.92,4.28c-5.17,7.8-8.02,11.38-14.99,18.84c-2.11,2.25-1.5,4.18,2,3.75c7.35-0.91,28.19-5.83,40.16-7.95" style="fill:none;stroke:black;stroke-width:2" />
</svg>

I can render the path but can't seem to find a way to make the path animate so that it looks like it is "being draw" as if with pencil. The animate node works for single coords but not for paths.

I will eventually end up using this animation in an iPhone app either with a parser or with a UIWebView.

2

3 Answers 3

8

Try animating the 'stroke-dashoffset' (note that you need a matching 'stroke-dasharray' with it), see this example. The length of the path that needs to be computed to be able to use this successfully can be fetched via script like:

var pathlength = yourPathElm.getTotalLength()

View source on the example to see how it's done.

6
  • Very nice example, thank you! I've been working over your example isolating only the elements that apply to just one stroke. I'm almost there except that I can't figure a couple of things: 1) Why is it that if I remove the translate from your <g> node I can't see anything? 2) Why did you repeat 54 twice in the style declaration for stroke-dasharray?
    – Julian
    May 9, 2011 at 14:16
  • 1) because the path is defined with that offset (quick inkscape hack). You could apply the transform to the path 'd' attribute and remove it from the 'g' element. 2) just because i think it's more clear, it's alternating between dash length and gap length, but it's indeed possible to just specify a single number if they are the same (the browser will expand them to be an even number of dashes/gaps) see w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty May 12, 2011 at 11:15
  • I'm wondering I do have moves inside my path, which do reset the dash stroke. Is there a way to circumvent that? (stretchsketch.com/animate.svg)
    – dr jerry
    Jan 13, 2012 at 11:34
  • begin="rect.click;0s". begin attributes means, offset amount of time after which the anim will start. Please explain what is rect.click. The rectangle with id rect has no click handlers with it. Mar 12, 2012 at 8:23
  • 1
    @rajkamal: begin="rect.click" means trigger the animation whenever the element with id "rect" is clicked, see w3.org/TR/SVG11/animate.html#SyncbaseValueSyntax. Mar 12, 2012 at 12:50
2

I tried for a long while to do this without having to add extra scripts to the header (that I have no idea of javascript didn't help), so here's the solution:

<path d="..." stroke-dasharray="">
  <animate attributeName="stroke-dashoffset" from="" to="0" dur="1s" begin="0s"
           onload="var length = parentNode.getTotalLength();
                   parentNode.setAttribute('stroke-dasharray',length+','+length);
                   this.setAttribute('from',length)" />
</path>

I added extra line breaks for readability here.

This is legal in SVG (although not in HTML) because the svg:animate element allows onload, which most HTML elements do not.

0

Once you've rendered your SVG path, to make it look like it's being drawn with a pencil, you could simply cover it all with an opaque layer, and then animate the movement of this layer along the path.

To find the CGPath along which you'll move the layer you can use this library: https://github.com/arielelkin/PocketSVG

This will parse the SVG data into a UIBezierPath. Then:

SvgToBezier *myBezier = [[SvgToBezier alloc] initFromSVGPathNodeDAttr:@"M176.17,369.617c0,0,335.106-189.361,214.894,38.298s129.787,282.978,178.723,42.553C618.724,210.042,834.681,87.702,790,307.915" rect:CGRectMake(0,0,1024,768)];

UIBezierPath *myPath = myBezier.bezier;

CAKeyframeAnimation *mySVGPathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
bounceAnimLeft.duration = 3;
bounceAnimLeft.path = myPath.CGPath;

[myObjectToMove.layer addAnimation:mySVGPathAnimation forKey:@"pathAnimation"];
2
  • Could you give some more explanation on how to use your piece of code ?
    – DevonDahon
    May 12, 2013 at 17:04
  • If your path is in SVG and you want to make animation where it looks like it's being drawn, you'll first need to use the code I posted above to convert the SVG into a CGPath. Once you have the CGPath, take a look at this: oleb.net/blog/2010/12/…
    – Eric
    May 13, 2013 at 1:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.