Sequentially animate SVG with d3js

Question

I've got an intricate SVG path composed of many segments defined with M#,#L#,# M#,#L#,#. I'd like to animate the drawing of this path, but in the order that they're listed. I've tried the solutions listed here: Can't make paths draw growing slowly with D3 , but they draw each segment of the path in parallel. How do I modify this so that they're animated sequentially?

Answer 1

I faced this problem in my whiteboard animation app. If your SVG file has a path with multiple move (M#) segments within a <path> element, parallel animation is unavoidable.

What you have to do is to break up the Move commands (M) within the <path> elements and store them into individual elements.

Either instruct your graphic artist to do so or write a simple parser to reconstruct your SVG file before loading it in DOM.

e.g. This svg file with multiple moves commands within the <path> element will have all the segments drawn at the same time.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="792px" height="612px" viewBox="0 0 792 612" enable-background="new 0 0 792 612" xml:space="preserve">
<g>
<path d="M184.258,256.649c1.309-1.742,2.541-3.093,3.696-4.184c-4.34-7.825-10.576-17.045-12.287-29.926
                c-1.667,21.723-7.667,27.647-7,37.191c0.537,7.686,4.105,13.873,10.521,17.196C178.836,270.993,179.51,262.968,184.258,256.649zM204.334,239.325c-5.241,12.075-8.956,9.837-14.921,15.876c-0.864,0.875-1.775,1.922-2.746,3.213
                c-4.61,6.135-4.88,14.29-4.363,19.82c0.342,3.666,1.03,6.181,1.03,6.181C202.334,273.554,206.334,247.225,204.334,239.325zM205.477,208.486c0.602-0.338,1.204-0.661,1.803-0.97c-0.694-0.353-1.444-0.719-2.279-1.104
                c-15-6.911-12.667-21.393-12.667-21.393c-16.355,19.708-12.421,38.267-6.032,47.368
                C188.276,222.657,194.783,214.486,205.477,208.486zM210.415,209.276c-9.472,4.503-20.029,12.519-21.569,26.141c-0.165,1.458-0.233,2.977-0.179,4.566
                c0,0,6.64-0.937,14.51-5.51c0.858-0.5,1.729-1.037,2.61-1.626c7.728-5.17,16.045-13.95,20.214-28.738
                C226,204.108,218.617,205.377,210.415,209.276zM177.84,319.268c-1.606-4.102-3.152-10.643-1.438-18.681c0.966-4.531,2.632-6.883,4.521-8.441
                c-6.775-6.099-16.252-16.29-16.252-16.29s-2,11.19,2.333,30.938C169.349,317.476,174.032,319.582,177.84,319.268z"/>

</g>
</svg>

The next svg file will have each segment drawn in sequence. Of course you have to code your animation to animate one path at a time. If they are all within on path elements, this would not be possible.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="792px" height="612px" viewBox="0 0 792 612" enable-background="new 0 0 792 612" xml:space="preserve">
<g>
<path d="M184.258,256.649c1.309-1.742,2.541-3.093,3.696-4.184c-4.34-7.825-10.576-17.045-12.287-29.926
                c-1.667,21.723-7.667,27.647-7,37.191c0.537,7.686,4.105,13.873,10.521,17.196C178.836,270.993,179.51,262.968,184.258,256.649z
                "/>
<path d="M204.334,239.325c-5.241,12.075-8.956,9.837-14.921,15.876c-0.864,0.875-1.775,1.922-2.746,3.213
                c-4.61,6.135-4.88,14.29-4.363,19.82c0.342,3.666,1.03,6.181,1.03,6.181C202.334,273.554,206.334,247.225,204.334,239.325z"/>
<path d="M205.477,208.486c0.602-0.338,1.204-0.661,1.803-0.97c-0.694-0.353-1.444-0.719-2.279-1.104
                c-15-6.911-12.667-21.393-12.667-21.393c-16.355,19.708-12.421,38.267-6.032,47.368
                C188.276,222.657,194.783,214.486,205.477,208.486z"/>
<path d="M210.415,209.276c-9.472,4.503-20.029,12.519-21.569,26.141c-0.165,1.458-0.233,2.977-0.179,4.566
                c0,0,6.64-0.937,14.51-5.51c0.858-0.5,1.729-1.037,2.61-1.626c7.728-5.17,16.045-13.95,20.214-28.738
                C226,204.108,218.617,205.377,210.415,209.276z"/>
            <path d="M177.84,319.268c-1.606-4.102-3.152-10.643-1.438-18.681c0.966-4.531,2.632-6.883,4.521-8.441
                c-6.775-6.099-16.252-16.29-16.252-16.29s-2,11.19,2.333,30.938C169.349,317.476,174.032,319.582,177.84,319.268z"/>

</g>
</svg>

Answer 2

D3 transitions have a delay() function that allows you to specify when to start the animation. You can use this to start drawing successive path segments after the previous ones have been drawn. You could also use the transition's end event to start the next transition after the previous one finishes. This way, you don't even have to specify the delay.

Alternatively, you could animate the path in SVG itself without Javascript. See here for an example of this. All you need to do is basically append an animate element to the path that tells it how to draw it.