我有一个错综复杂的SVG路径，由许多用M＃，＃L＃，＃M＃，＃L＃，＃定义的段组成。我想动画这条路径的绘制，但按照它们列出的顺序。我已尝试过此处列出的解决方案：Can't make paths draw growing slowly with D3，但它们并行绘制路径的每个段。如何修改它以便按顺序设置动画？
答案 0 :(得分：2)
D3过渡具有delay()功能，允许您指定何时开始动画。您可以使用它在绘制前一个路径段后开始绘制连续的路径段。您还可以使用转换的end事件在上一个转换结束后开始下一个转换。这样，您甚至不必指定延迟。
或者，您可以在没有Javascript的情况下为SVG中的路径设置动画。有关此示例，请参阅here。您需要做的就是向animate附加一个path元素，告诉它如何绘制它。
答案 1 :(得分：1)
我在我的白板动画应用中遇到了这个问题。如果您的SVG文件在<path>元素中有一个包含多个移动（M＃）段的路径，则并行动画是不可避免的。
您需要做的是在<path>元素中分解Move命令（M）并将它们存储到单个元素中。
指示您的图形艺术家这样做或编写一个简单的解析器来重建您的SVG文件，然后再将其加载到DOM中。
e.g。这个在<path>元素中包含多个移动命令的svg文件将同时绘制所有段。
<?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>
下一个svg文件将按顺序绘制每个段。 当然，您必须将动画编码为一次一个路径的动画。如果它们都在路径元素中，那么这是不可能的。
<?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>